/* ===== Finance Tracker v5.5 - Full CSS with REM scaling ===== */

@font-face {
    font-family: 'Samsung';
    src: url('../fonts/samsung.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --base-size: 16px;
    --scale: 1;
    --safe-area-top: env(safe-area-inset-top, 20px);
    --safe-area-bottom: env(safe-area-inset-bottom, 20px);
    --nav-height: 64px;
    --radius-xs: 0.5rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
      --glow-blur: 18px;
  --glow-speed: 3.25s;
  --glow-opacity: 0.95;
}

html { font-size: calc(var(--base-size) * var(--scale)); transition: font-size 0.25s ease; }

.theme-amoled {
    --bg-primary: #000000;
    --bg-overlay: #00000092;
    --bg-secondary: #17171Ab1;
    --bg-secondarydefault: #0f0f11;
    --bg-card: #17171A;
    --bg-elevated: #1b1b1f;
    --bg-input: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.7);
    --text-tertiary: rgba(255,255,255,0.5);
    --accent-blue: #4d90fe;
    --accent-green: #4caf50;
    --accent-red: #ff5252;
    --accent-orange: #ff9800;
    --gradient-primary: #425bff8e;
    --gradient-secondary: rgba(52, 255, 204, 0.589);
}

.theme-dark {
    --bg-primary: #121212;
        --bg-overlay: #121212a5;
    --bg-secondary: #1e1e1eb1;
    --bg-secondarydefault: #1e1e1e;
    --bg-card: #2d2d2d;
    --bg-elevated: #3d3d3d;
    --bg-input: #3d3d3d;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.7);
    --text-tertiary: rgba(255,255,255,0.5);
    --accent-blue: #4d90fe;
    --accent-green: #4caf50;
    --accent-red: #ff5252;
    --accent-orange: #ff9800;
    --gradient-primary: #425bff8e;
    --gradient-secondary: rgba(52, 255, 204, 0.589);
}

.theme-light {
    --bg-primary: #f5f5f5;
    --bg-overlay: #ffffff99;
    --bg-secondary: #ffffffbe;
    --bg-secondarydefault:#ffffff;
    --bg-card: #eaecee;
    --bg-elevated: #ffffff;
    --bg-input: #e8e8e8;
    --text-primary: #1a1a1a;
    --text-secondary: rgba(0,0,0,0.7);
    --text-tertiary: rgba(0,0,0,0.5);
    --accent-blue: #1a73e8;
    --accent-green: #34a853;
    --accent-red: #ea4335;
    --accent-orange: #f9ab00;
    --gradient-primary: #566dff94;
    --gradient-secondary: #4cffd279;
}

.theme-sepia {
    --bg-primary: #f4ecd8;
    --bg-overlay: #f4ecd8af;
    --bg-secondary: #faf6ebbb;
    --bg-secondarydefault:#faf6eb;
    --bg-card: #fffefa;
    --bg-elevated: #e8e0cc;
    --bg-input: #e8e0cc;
    --text-primary: #5b4636;
    --text-secondary: rgba(91,70,54,0.7);
    --text-tertiary: rgba(91,70,54,0.5);
    --accent-blue: #6b8e23;
    --accent-green: #6b8e23;
    --accent-red: #cd5c5c;
    --accent-orange: #d2691e;
    --gradient-primary: #caff5f97;
    --gradient-secondary: #d4a373cc;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

body {
    font-family: 'Samsung', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    font-size: 1rem;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; font-size: inherit; }
input, select { font-family: inherit; border: none; background: none; color: inherit; outline: none; font-size: inherit; }
.hidden { display: none !important; }

.app-container {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-primary);
    overflow: hidden;
}

.init-loading {
    position: fixed;
    inset: 0;
    background: var(--bg-primary, #000);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.init-loading.fade-out { opacity: 0; pointer-events: none; }

.init-loading-logo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #4d90fe, #1a73e8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: initPulse 1.2s ease infinite;
}

.init-loading-logo svg { width: 2.25rem; height: 2.25rem; color: white; }

.init-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #4d90fe;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes initPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } }
@keyframes spin { to { transform: rotate(360deg); } }




 /* АВТОРИЗАЦИЯ */
.auth-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 1000;

  display: flex;
  align-items: stretch;
  justify-content: center;

  /* safe-area + нормальные отступы */
  padding:
    calc(1.25rem + env(safe-area-inset-top))
    1.25rem
    calc(1.25rem + env(safe-area-inset-bottom));

  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.auth-screen.visible { opacity: 1; visibility: visible; }


.auth-content {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  text-align: center;

  /* ВАЖНО: не 100svh, а 100% от .auth-screen (без переполнения из-за padding) */
  height: 100%;
  min-height: 0; /* чтобы flex-дети могли сжиматься */
  box-sizing: border-box;
}


.auth-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.08;
  margin: 0.25rem 0 0.9rem;
}
.auth-title span { display: block; }

.auth-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}


/* Картинка: занимает середину и адаптируется по высоте */
.auth-image {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);

  /* ключ: картинка растягивается в доступное место между верхом и формой */
  flex: 1 1 auto;
  min-height: 0;

  /* чтобы была красивая “плашка” как на рефе */
  aspect-ratio: 2 / 4;   /* можешь поменять на 1 / 1 если хочешь квадрат */
  max-height: 555vh;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 1.25rem 0;
}

.auth-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* если вдруг где-то остался svg */
.auth-image svg { width: 3.75rem; height: 3.75rem; color: var(--accent-blue); }


/* Форма всегда внизу и НЕ вылазит за экран */
.auth-form {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;

  width: 100%;
  box-sizing: border-box;
}

.auth-input,
.auth-btn {
  width: 100%;
  box-sizing: border-box;
}

.auth-input {
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  text-align: center;
  letter-spacing: 1px;
}

.auth-btn {
  padding: 1rem;
  background: var(--accent-blue);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
  color: white;
  transition: all var(--transition-fast);
}

.auth-btn:active { opacity: 0.9; transform: scale(0.98); }


.telegram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    color: #0088cc;
    font-size: 1rem;
    text-decoration: none;
}

.telegram-link svg { width: 1.25rem; height: 1.25rem; }
.telegram-link.small { padding: 0.75rem; font-size: 0.9375rem; margin-top: 0.75rem; }
.auth-error { color: var(--accent-red); font-size: 0.9375rem; margin-top: 0.5rem; text-align: center; }

.pin-screen, .pin-setup-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pin-screen.visible, .pin-setup-screen.visible { opacity: 1; visibility: visible; }

.pin-screen-content {
    text-align: center;
    padding: 1.5rem;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pin-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--bg-card);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    overflow: hidden;
}

.pin-avatar svg { width: 2rem; height: 2rem; }
.pin-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pin-setup-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--accent-blue);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.pin-setup-icon svg { width: 1.75rem; height: 1.75rem; }
.pin-screen-title { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.375rem; text-align: center; width: 100%; }
.pin-screen-subtitle { font-size: 1rem; color: var(--text-tertiary); margin-bottom: 1.75rem; text-align: center; width: 100%; }
.pin-dots { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; width: 100%; }

.pin-dot {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--bg-elevated);
    transition: all var(--transition-fast);
}

.pin-dot.filled { background: var(--accent-blue); }
.pin-dot.error { background: var(--accent-red); animation: shake 0.3s; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 4.5rem);
    grid-template-rows: repeat(4, 4.5rem);
    gap: 0.875rem;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
}

.pin-key {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    user-select: none;
}

.pin-key:active { background: var(--bg-elevated); transform: scale(0.95); }
.pin-key svg { width: 1.5rem; height: 1.5rem; }
.pin-key.empty { background: transparent; pointer-events: none; }
.forgot-pin-btn { margin-top: 1.75rem; font-size: 1rem; color: var(--accent-blue); text-align: center; width: 100%; }

.page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all var(--transition-normal);
    overflow-y: auto;
    padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 0.25rem);
}

.page.active { opacity: 1; visibility: visible; transform: translateX(0); }
.page-content { padding: calc(var(--safe-area-top) + 1rem) 1rem 1rem; }

.balance-header {
    position: relative;
    text-align: center;
    padding: 1.5rem 0 1.75rem;
    margin: 0 -1rem;
}

.balance-gradient-bg {
    position: fixed;
    top: -6rem;
    left: 0;
    right: 0;
    height: 22rem;
    width: auto;
    background:
        radial-gradient(ellipse 70% 70% at 30% 25%, color-mix(in srgb, var(--gradient-primary) 70%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse 70% 70% at 70% 20%, color-mix(in srgb, var(--gradient-secondary) 65%, transparent) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
    opacity: .95;
}

.balance-label { font-size: 0.9375rem; color: var(--text-secondary); position: relative; z-index: 1; }

.balance-amount {
    font-size: 2.75rem;
    font-weight: 600;
    margin: 0.25rem 0 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
    position: relative;
    z-index: 1;
}

.currency { font-size: 1.875rem; font-weight: 400; color: var(--text-secondary); }

.quick-actions {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.quick-action-btn { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0.5rem;
    padding: 0.5rem;
}
.quick-action-btn:active { transform: scale(0.95); }

.action-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon svg, .action-icon .custom-icon { width: 1.75rem; height: 1.75rem; }
.action-icon.income { background: rgba(76,175,80,0.15); color: var(--accent-green); }
.action-icon.expense { background: rgba(255,82,82,0.15); color: var(--accent-red); }
.quick-action-btn span { font-size: 0.9375rem; color: var(--text-secondary); font-weight: 500; }

.monthly-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    position: relative;
    z-index: 1;
}

.monthly-stat svg { width: 1rem; height: 1rem; color: var(--accent-green); }
.monthly-stat.negative svg { color: var(--accent-red); }
.monthly-stat .positive { color: var(--accent-green); }
.monthly-stat .negative { color: var(--accent-red); }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.section-header h2 { font-size: 1.1875rem; font-weight: 600; }
.goals-counter { font-size: 0.875rem; color: var(--text-tertiary); }

.goals-section { margin-top: 1.5rem; }
.goals-swiper { position: relative; overflow: hidden; margin: 0 -1rem; padding: 0 1rem; }
.goals-track { display: flex; gap: 0.75rem; transition: transform var(--transition-slow); }

.goal-card {
    flex: 0 0 calc(100% - 2rem);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 1rem;
    min-height: 9rem;
    display: flex;
    gap: 0.875rem;
    transition: all var(--transition-fast);
}

.goal-card:active { transform: scale(0.98); }

.goal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.goal-icon svg, .goal-icon .custom-icon { width: 1.5rem; height: 1.5rem; color: white; }
.goal-info { flex: 1; display: flex; flex-direction: column; }
.goal-info h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.375rem; }
.goal-progress-info { margin-bottom: 0.625rem; }
.goal-progress-info .collected { font-size: 0.8125rem; color: var(--text-tertiary); display: block; }
.goal-amount { font-size: 0.9375rem; color: var(--text-secondary); }
.goal-amount strong { font-size: 1.1875rem; color: var(--text-primary); }

.goal-progress-bar {
    height: 0.3125rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.goal-progress-bar.large { height: 0.5rem; margin-bottom: 0.625rem; }
.progress-fill { height: 100%; border-radius: var(--radius-full); transition: width var(--transition-slow); }
.goal-meta { display: flex; justify-content: space-between; font-size: 0.875rem; }
.goal-percent { font-weight: 500; }
.goal-remaining { color: var(--text-tertiary); }

.goal-card.add-goal {
    background: transparent;
    border: 2px dashed var(--bg-elevated);
    align-items: center;
    justify-content: center;
}

.add-goal-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-tertiary); }

.add-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-icon svg { width: 1.5rem; height: 1.5rem; }
.swiper-pagination { display: flex; justify-content: center; gap: 0.375rem; margin-top: 0.75rem; }
.swiper-pagination .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--bg-elevated); transition: all var(--transition-normal); }
.swiper-pagination .dot.active { width: 1.25rem; border-radius: 3px; background: var(--accent-blue); }

.transactions-section { margin-top: 1.5rem; }
.transactions-list { display: flex; flex-direction: column; }
.transactions-group { margin-bottom: 0.75rem; }
.transactions-group-header { display: flex; justify-content: space-between; padding: 0.375rem 0; margin-bottom: 0.375rem; }
.transactions-group-header .date { font-size: 0.9375rem; color: var(--text-tertiary); }
.transactions-group-header .total { font-size: 0.9375rem; font-weight: 500; }
.transactions-group-header .total.positive { color: var(--accent-green); }
.transactions-group-header .total.negative { color: var(--accent-red); }
.transactions-group-items { display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius-xl); overflow: hidden; }

.transaction-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--bg-card);
    transition: all var(--transition-fast);
}

.transaction-item:active { background: var(--bg-elevated); }

.transaction-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-icon svg, .transaction-icon .custom-icon { width: 1.375rem; height: 1.375rem; }
.transaction-info { flex: 1; min-width: 0; }
.transaction-name { font-size: 1rem; font-weight: 500; display: block; }
.transaction-meta { font-size: 0.875rem; color: var(--text-tertiary); }
.transaction-amount { font-size: 1rem; font-weight: 600; flex-shrink: 0; }
.transaction-amount.positive { color: var(--accent-green); }

.empty-state { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1.25rem; color: var(--text-tertiary); text-align: center; }
.empty-state svg { width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
.empty-state span { font-size: 1rem; }
.empty-state.full { grid-column: span 2; }

.load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.875rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--accent-blue);
    margin-top: 0.5rem;
}

.load-more-btn svg { width: 1rem; height: 1rem; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.625rem; font-weight: 700; }

.header-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.header-btn svg { width: 1.375rem; height: 1.375rem; }
.header-btn:active { background: var(--bg-elevated); transform: scale(0.95); }

.back-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.back-btn svg { width: 1.625rem; height: 1.625rem; }

.page-header.centered { display: flex; align-items: center; justify-content: center; position: relative; }
.page-header.centered .back-btn { position: absolute; left: 0; }
.page-header.centered .achievements-count { position: absolute; right: 0; }
.page-header.centered h1 { text-align: center; margin: 0; }

.stats-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }

.stat-card {
background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 1.125rem;
    align-items: flex-start;
    gap: 0.875rem;
    display: flex;
    flex-direction: column;
}

.stat-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg { width: 1rem; height: 1rem; }
.income-card .stat-icon { background: rgba(76,175,80,0.15); color: var(--accent-green); }
.expense-card .stat-icon { background: rgba(255,82,82,0.15); color: var(--accent-red); }
.stat-info { display: flex; flex-direction: column; gap: 0.125rem; }
.stat-label { font-size: 0.8125rem; color: var(--text-tertiary); }
.stat-value { font-size: 1.325rem; font-weight: 600; }
.income-card .stat-value { color: var(--accent-green); }
.expense-card .stat-value { color: var(--accent-red); }

.chart-section { background: var(--bg-card); border-radius: var(--radius-xl); padding: 1.125rem; margin-bottom: 1.25rem; }
.chart-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; }

.chart-tab {
    flex: 1;
    padding: 0.875rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.chart-tab.active { background: var(--accent-blue); color: white; }

.chart-period-row { display: flex; justify-content: center; gap: 0.5rem; }

.chart-period-btn {
    padding: 0.625rem 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.chart-period-btn.active { background: var(--accent-blue); color: white; }
.chart-period-btn:active { transform: scale(0.95); }

.chart-container { display: flex; flex-direction: column; gap: 1rem; }

.donut-chart { position: relative; width: 13rem; height: 13rem; margin: 0 auto; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-bg { fill: none; stroke: var(--bg-elevated); stroke-width: 10; }
.donut-segment { fill: none; stroke-width: 10; stroke-linecap: round; }
.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.donut-total { display: block; font-size: 1.1875rem; font-weight: 600; }
.donut-label { font-size: 0.8125rem; color: var(--text-tertiary); }

.chart-legend { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.875rem; }
.legend-item { display: flex; align-items: center; gap: 0.75rem; }
.legend-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; }
.legend-label { flex: 1; font-size: 0.9375rem; color: var(--text-secondary); }
.legend-value { font-size: 0.9375rem; font-weight: 500; }
.legend-percent { font-size: 0.875rem; color: var(--text-tertiary); width: 2.5rem; text-align: right; }

.weekly-chart-section { background: var(--bg-card); border-radius: var(--radius-xl); padding: 1.125rem; margin-bottom: 1.25rem; }
.bar-chart { display: flex; justify-content: space-between; align-items: flex-end; height: 6.5rem; padding-top: 1rem; }
.bar-item { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; flex: 1; }
.bar-wrapper { width: 100%; height: 5rem; display: flex; align-items: flex-end; justify-content: center; }
.bar { width: 1.375rem; background: var(--accent-blue); border-radius: 4px 4px 2px 2px; min-height: 4px; }
.bar.empty { background: var(--bg-elevated); }
.bar-item.active .bar { box-shadow: 0 0 12px rgba(77, 145, 254, 0); }
.bar-label { font-size: 0.8125rem; color: var(--text-tertiary); }
.bar-item.active .bar-label { color: var(--accent-blue); font-weight: 500; }
.see-all-btn { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9375rem; color: var(--accent-blue); }
.see-all-btn svg { width: 0.9375rem; height: 0.9375rem; }

/* Goals Page */
.goals-balance-info { display: flex; gap: 0.75rem; margin-bottom: 1.125rem; }
.balance-info-item { flex: 1; background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.125rem; text-align: center; }
.balance-info-label { display: block; font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 0.125rem; }
.balance-info-value { font-size: 1.1875rem; font-weight: 600; }
.balance-info-value.accent { color: var(--accent-blue); }
.goals-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.125rem; }
.goals-tab { flex: 1; padding: 0.875rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); }
.goals-tab.active { background: var(--accent-blue); color: white; }
.goals-list { display: flex; flex-direction: column; gap: 0.75rem; }

.goal-list-item {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 1.125rem;
    display: flex;
    gap: 0.875rem;
    transition: all var(--transition-fast);
    position: relative;
}

.goal-list-item:active { background: var(--bg-elevated); }
.goal-list-item.dragging { opacity: 0.7; transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 10; }
.goal-list-icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.goal-list-icon svg, .goal-list-icon .custom-icon { width: 1.5rem; height: 1.5rem; color: white; }
.goal-list-info { flex: 1; min-width: 0; padding-right: 2.75rem; }
.goal-list-name { font-size: 1rem; font-weight: 500; margin-bottom: 0.125rem; }
.goal-list-amounts { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: 0.375rem; }
.goal-list-amounts strong { color: var(--text-primary); }
.goal-list-progress { height: 0.3125rem; background: var(--bg-elevated); border-radius: var(--radius-full); overflow: hidden; }
.goal-list-percent { position: absolute; top: 1.125rem; right: 1.125rem; font-size: 0.9375rem; font-weight: 600; color: var(--accent-blue); }
.goal-placeholder { background: var(--bg-elevated); border-radius: var(--radius-xl); border: 2px dashed var(--text-tertiary); opacity: 0.5; }

/* Goal Detail */
.goal-detail-header { text-align: center; margin-bottom: 1.25rem; }
.goal-detail-icon { width: 4.25rem; height: 4.25rem; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.875rem; }
.goal-detail-icon svg { width: 2rem; height: 2rem; color: white; }
.goal-detail-name { font-size: 1.375rem; font-weight: 600; }
.goal-detail-progress { background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.125rem; margin-bottom: 0.875rem; }
.goal-detail-amounts { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.goal-detail-current { font-size: 1.625rem; font-weight: 600; }
.goal-detail-target { font-size: 0.9375rem; color: var(--text-tertiary); }
.goal-detail-percent { text-align: center; font-size: 0.9375rem; color: var(--accent-blue); font-weight: 500; }
.goal-detail-balance-info { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.875rem; background: var(--bg-card); border-radius: var(--radius-lg); margin-bottom: 1.125rem; font-size: 0.9375rem; color: var(--text-secondary); }
.goal-detail-balance-info svg { width: 1.125rem; height: 1.125rem; color: var(--accent-blue); }
.goal-detail-balance-info strong { color: var(--text-primary); }
.goal-detail-actions { display: flex; gap: 0.75rem; margin-bottom: 1.125rem; }
.goal-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 1rem; border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; }
.goal-action-btn.deposit { background: rgba(76,175,80,0.15); color: var(--accent-green); }
.goal-action-btn.withdraw { background: rgba(255,82,82,0.15); color: var(--accent-red); }
.goal-action-btn:active { transform: scale(0.98); }
.goal-action-btn svg { width: 1.125rem; height: 1.125rem; }
.goal-amount-section { margin-bottom: 1.125rem; }
.goal-quick-amounts { display: flex; gap: 0.375rem; margin-bottom: 0.875rem; flex-wrap: wrap; }
.quick-amount-btn { padding: 0.625rem 1rem; background: var(--bg-card); border-radius: var(--radius-full); font-size: 0.9375rem; color: var(--text-secondary); }
.quick-amount-btn:active { background: var(--accent-blue); color: white; }
.edit-goal-btn { display: flex; align-items: center; justify-content: center; gap: 0.375rem; width: 100%; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; color: var(--text-secondary); }
.edit-goal-btn svg { width: 1.125rem; height: 1.125rem; }

/* Reminders - NO orange shadow */
.reminders-stats-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 1.125rem;
    margin-bottom: 1.125rem;
}

.reminders-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.reminders-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reminders-stat-label {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.reminders-stat-value {
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.reminders-next-payment {
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.reminders-next-label {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    display: block;
    margin-bottom: 0.5rem;
}

.reminders-next-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reminders-next-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.reminders-next-amount {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-blue);
}

.reminders-list { display: flex; flex-direction: column; gap: 0.75rem; }
.reminder-item { background: var(--bg-card); border-radius: var(--radius-xl); padding: 1.125rem; display: flex; gap: 0.875rem; }
.reminder-item:active { background: var(--bg-elevated); }
.reminder-item.overdue { background: rgba(255,82,82,0.08); }
.reminder-item.today { background: rgba(255,152,0,0.08); }
.reminder-item.tomorrow { background: rgba(255,152,0,0.05); }
.reminder-item.soon { background: rgba(255,152,0,0.03); }
.reminder-icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.reminder-icon svg, .reminder-icon .custom-icon { width: 1.375rem; height: 1.375rem; }
.reminder-icon.payment { background: rgba(77,144,254,0.15); color: var(--accent-blue); }
.reminder-icon.debt { background: rgba(255,152,0,0.15); color: var(--accent-orange); }
.reminder-info { flex: 1; min-width: 0; }
.reminder-name { font-size: 1rem; font-weight: 500; margin-bottom: 0.125rem; }
.reminder-details { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--text-tertiary); flex-wrap: wrap; }
.reminder-date { display: flex; align-items: center; gap: 0.25rem; }
.reminder-date svg { width: 0.875rem; height: 0.875rem; }
.reminder-date.today, .reminder-date.tomorrow, .reminder-date.soon { color: var(--accent-orange); }
.reminder-date.overdue { color: var(--accent-red); }
.reminder-repeat-badge { font-size: 0.75rem; padding: 0.1875rem 0.5rem; background: var(--bg-elevated); border-radius: var(--radius-full); }
.reminder-amount { font-size: 1rem; font-weight: 600; flex-shrink: 0; align-self: center; }
.reminder-detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.125rem; }
.reminder-detail-icon { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; }
.reminder-detail-icon svg { width: 1.5rem; height: 1.5rem; }
.reminder-detail-info h2 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.125rem; }
.reminder-detail-info span { font-size: 0.9375rem; color: var(--text-tertiary); }
.reminder-detail-amount { font-size: 2.125rem; font-weight: 600; text-align: center; margin-bottom: 1.375rem; }
.reminder-detail-rows { background: var(--bg-card); border-radius: var(--radius-lg); padding: 0.25rem 0; margin-bottom: 1.375rem; }
.detail-row { display: flex; justify-content: space-between; padding: 0.875rem 1.125rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--text-tertiary); font-size: 0.9375rem; }
.detail-value { font-size: 0.9375rem; font-weight: 500; }
.reminder-detail-actions { display: flex; gap: 0.75rem; }
.action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 1rem; background: var(--accent-green); border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; color: white; }
.action-btn.secondary { background: var(--bg-card); color: var(--text-secondary); }
.action-btn:active { transform: scale(0.98); }
.action-btn svg { width: 1.125rem; height: 1.125rem; }

/* Profile */
.profile-header { display: flex; flex-direction: column; align-items: center; padding: 1.125rem 0 1.625rem; }
.profile-avatar-wrapper { position: relative; margin-bottom: 0.875rem; }
.profile-avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); overflow: hidden; }
.profile-avatar svg { width: 2.25rem; height: 2.25rem; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; color: white; }
.avatar-edit-btn svg { width: 1rem; height: 1rem; }
.profile-name { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.125rem; }
.profile-since { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: 0.875rem; }
.profile-achievements { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.achievements-preview { display: flex; gap: 0.375rem; }
.achievement-mini { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--bg-card); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.achievement-mini img { width: 1.625rem; height: 1.625rem; }
.no-achievements { font-size: 0.875rem; color: var(--text-tertiary); }
.achievements-link { display: flex; align-items: center; gap: 0.125rem; font-size: 0.875rem; color: var(--accent-blue); }
.achievements-link svg { width: 0.9375rem; height: 0.9375rem; }
.profile-stats { display: flex; justify-content: center; gap: 2.25rem; padding: 1.125rem; background: var(--bg-card); border-radius: var(--radius-xl); margin-bottom: 1.625rem; }
.profile-stat { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.stat-number { font-size: 1.375rem; font-weight: 600; }
.stat-desc { font-size: 0.8125rem; color: var(--text-tertiary); }

/* Settings */
.settings-section { margin-bottom: 1.375rem; }
.settings-title { font-size: 0.875rem; font-weight: 600; color: var(--text-tertiary); margin-bottom: 0.5rem; padding-left: 0.25rem; }
.settings-group { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; }
.settings-item { display: flex; align-items: center; gap: 1rem; padding: 1.125rem; background: var(--bg-card); width: 100%; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.03); }
.settings-item:last-child { border-bottom: none; }
.settings-item:active { background: var(--bg-elevated); }
.settings-item.danger .settings-label { color: var(--accent-red); }
.settings-icon { width: 2.3rem; height: 2.3rem; border-radius: var(--radius-md); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); }
.settings-icon svg, .settings-icon .custom-icon { width: 2.6rem; height: 2.6rem; }
.settings-icon.danger { color: var(--accent-red); }
.settings-info { flex: 1; display: flex; flex-direction: column; gap: 0.0625rem; }
.settings-label { font-size: 1rem; font-weight: 500; }
.settings-desc { font-size: 0.875rem; color: var(--text-tertiary); }
.settings-item > svg:last-child { color: var(--text-tertiary); width: 1.125rem; height: 1.125rem; }

/* Achievements */
.achievements-count { font-size: 0.9375rem; color: var(--text-tertiary); }
.achievements-filters { display: flex; gap: 0.375rem; margin-bottom: 1.125rem; overflow-x: auto; }
.ach-filter { padding: 0.625rem 1rem; background: var(--bg-card); border-radius: var(--radius-full); font-size: 0.9375rem; color: var(--text-secondary); white-space: nowrap; }
.ach-filter.active { background: var(--accent-blue); color: white; }
.achievements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.achievement-card { background: var(--bg-card); border-radius: var(--radius-xl); padding: 1.125rem 0.875rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.achievement-card:active { background: var(--bg-elevated); }
.achievement-card.locked { opacity: 0.5; }
.achievement-card.locked .achievement-icon-wrapper { filter: grayscale(100%); }
.achievement-icon-wrapper { position: relative; width: 3.75rem; height: 3.75rem; margin-bottom: 0.75rem; }
.achievement-icon-bg { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accent-blue) calc(var(--progress, 0) * 360deg), var(--bg-elevated) 0); padding: 3px; }
.achievement-icon-bg::before { content: ''; position: absolute; inset: 3px; background: var(--bg-card); border-radius: 50%; }
.achievement-icon { position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.achievement-icon img { width: 2.125rem; height: 2.125rem; }
.achievement-title { font-size: 0.9375rem; font-weight: 500; margin-bottom: 0.125rem; }
.achievement-progress-text { font-size: 0.8125rem; color: var(--accent-blue); }



.icon-wrapper {
  position: relative;
  display: flex;
}

/* Bottom Sheets */
.bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: 200; }
.bottom-sheet-overlay.active { opacity: 1; visibility: visible; }
.bottom-sheet { position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 100%; max-width: 430px; max-height: 90vh; background: var(--bg-secondarydefault); border-radius: var(--radius-xl) var(--radius-xl) 0 0; z-index: 201; transition: transform var(--transition-slow); overflow-y: auto; }
.bottom-sheet.active { transform: translate(-50%, 0); }
.bottom-sheet.small { max-height: 50vh; }
.sheet-handle { width: 2rem; height: 0.25rem; background: var(--bg-elevated); border-radius: var(--radius-full); margin: 0.75rem auto 0.5rem; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.375rem 0; }
.sheet-header .sheet-title { margin-bottom: 0; text-align: left; }
.sheet-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: var(--bg-tertiary); border: none; border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.sheet-close:active { transform: scale(0.9); background: var(--bg-quaternary); }
.sheet-close svg { width: 1.25rem; height: 1.25rem; }
.sheet-content { padding: 0.5rem 1.375rem calc(1.375rem + var(--safe-area-bottom)); }
.sheet-content.center { text-align: center; }
.sheet-title { font-size: 1.1875rem; font-weight: 600; text-align: center; margin-bottom: 1.375rem; }

/* PIN Sheet */
#pin-sheet .sheet-content { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0.5rem 1.375rem calc(1.625rem + var(--safe-area-bottom)); }
#pin-sheet .sheet-title { width: 100%; text-align: center; }
#pin-sheet .pin-subtitle, .pin-subtitle { font-size: 1rem; color: var(--text-tertiary); margin-bottom: 1.625rem; text-align: center; width: 100%; }
#pin-sheet .pin-dots { justify-content: center; width: 100%; }
#pin-sheet .pin-pad { margin: 0 auto; }
.remove-pin-btn { margin-top: 1.625rem; padding: 1rem; color: var(--accent-red); font-size: 1rem; text-align: center; width: 100%; }

/* Forgot PIN */
#forgot-pin-sheet .sheet-content { text-align: center; padding: 1.125rem 1.375rem calc(1.625rem + var(--safe-area-bottom)); }
#forgot-pin-sheet .forgot-pin-icon { width: 4.25rem; height: 4.25rem; border-radius: 50%; background: rgba(255,152,0,0.15); margin: 0 auto 1.375rem; display: flex; align-items: center; justify-content: center; color: var(--accent-orange); }
#forgot-pin-sheet .forgot-pin-icon svg { width: 2rem; height: 2rem; }
#forgot-pin-sheet .sheet-title { margin-bottom: 0.5rem; }
#forgot-pin-sheet .forgot-pin-text { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1.625rem; line-height: 1.5; }
#forgot-pin-sheet .auth-input { margin-bottom: 1.125rem; }
#forgot-pin-sheet .auth-btn { margin-bottom: 0.875rem; }

/* Forms */
.operation-type-selector { display: flex; gap: 0.75rem; margin-bottom: 1.375rem; }
.type-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.type-btn svg { width: 1.125rem; height: 1.125rem; }
.type-btn.active[data-type="expense"] { background: rgba(255,82,82,0.15); color: var(--accent-red); }
.type-btn.active[data-type="income"] { background: rgba(76,175,80,0.15); color: var(--accent-green); }
.amount-input-wrapper { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-bottom: 1rem; }
.amount-input-wrapper.small { justify-content: flex-start; background: var(--bg-card); border-radius: var(--radius-lg); padding: 0.875rem 1.125rem; margin-bottom: 0.75rem; }
.amount-label { font-size: 0.9375rem; color: var(--text-tertiary); min-width: 4rem; }
.amount-input { font-size: 2.625rem; font-weight: 600; text-align: center; width: 100%; max-width: 13rem; background: transparent; }
.amount-input.small { font-size: 1.375rem; text-align: right; flex: 1; }
.amount-input::placeholder { color: var(--text-tertiary); }
.amount-currency { font-size: 1.875rem; color: var(--text-tertiary); }
.amount-input-wrapper.small .amount-currency { font-size: 1.25rem; }

/* Quick amounts */
.quick-amounts { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.375rem; flex-wrap: wrap; }
.quick-amount-chip { padding: 0.625rem 1.125rem; background: var(--bg-card); border-radius: var(--radius-full); font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition-fast); }
.quick-amount-chip:active { background: var(--accent-blue); color: white; transform: scale(0.95); }

/* Bigger categories for mobile */
.categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem; margin-bottom: 1.125rem; }
.category-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.5rem; border-radius: var(--radius-lg); min-height: 5.5rem; }
.category-btn:active, .category-btn.active { background: var(--bg-card); }
.category-btn.active { box-shadow: inset 0 0 0 2px var(--accent-blue); }
.category-icon { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.category-icon svg, .category-icon .custom-icon { width: 1.5rem; height: 1.5rem; }
.category-btn span { font-size: 0.8125rem; color: var(--text-secondary); text-align: center; line-height: 1.2; }

.description-input, .profile-name-input, .goal-name-input, .category-name-input, .reminder-name-input, .reminder-note-input { width: 100%; padding: 1rem 1.125rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; margin-bottom: 0.875rem; }
.description-input::placeholder, .profile-name-input::placeholder, .goal-name-input::placeholder, .category-name-input::placeholder, .reminder-name-input::placeholder, .reminder-note-input::placeholder { color: var(--text-tertiary); }
.goal-name-input { text-align: center; font-size: 1.0625rem; font-weight: 500; }

/* DateTime */
.datetime-section { margin-bottom: 1.125rem; }
.datetime-toggle { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 1rem 1.125rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; }
.datetime-toggle svg:first-child { width: 1.25rem; height: 1.25rem; color: var(--accent-blue); }
.datetime-toggle span { flex: 1; text-align: left; }
.toggle-icon { width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); transition: transform var(--transition-fast); }
.datetime-picker, .reminder-calendar-picker { background: var(--bg-card); border-radius: var(--radius-lg); padding: 1rem; margin-top: 0.5rem; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.cal-nav { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.cal-nav svg { width: 1.125rem; height: 1.125rem; }
.cal-title { font-size: 1rem; font-weight: 600; }
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.5rem; }
.day-name { font-size: 0.8125rem; color: var(--text-tertiary); text-align: center; padding: 0.25rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; border-radius: 50%; cursor: pointer; }
.cal-day:active { background: var(--bg-elevated); }
.cal-day.empty { pointer-events: none; }
.cal-day.today { color: var(--accent-blue); font-weight: 600; }
.cal-day.selected { background: var(--accent-blue); color: white; }
.time-picker-container { display: flex; justify-content: center; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--bg-elevated); }
.time-input-group { display: flex; align-items: center; gap: 0.25rem; background: var(--bg-elevated); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; }
.time-input { width: 2.5rem; text-align: center; font-size: 1.1875rem; font-weight: 600; background: transparent; }
.time-separator { font-size: 1.1875rem; font-weight: 600; color: var(--text-tertiary); }
.date-picker-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 1rem 1.125rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; margin-bottom: 0.875rem; }
.date-picker-btn svg:first-child { width: 1.25rem; height: 1.25rem; color: var(--accent-blue); }
.date-picker-btn span { flex: 1; text-align: left; }
.date-picker-btn svg:last-child { width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); }
.hidden-date-input { position: absolute; opacity: 0; pointer-events: none; }
.save-btn { width: 100%; padding: 1.0625rem; background: var(--accent-blue); border-radius: var(--radius-lg); font-size: 1.0625rem; font-weight: 600; color: white; }
.save-btn:active { transform: scale(0.98); opacity: 0.9; }

/* Step Wizard */
.step-indicator { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.375rem; }
.step-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bg-elevated); transition: all var(--transition-fast); }
.step-dot.active { background: var(--accent-blue); width: 1.5rem; border-radius: 0.25rem; }
.step-dot.completed { background: var(--accent-green); }
.step-content { display: none; }
.step-content.active { display: block; }
.step-content h3 { font-size: 1.1875rem; font-weight: 600; text-align: center; margin-bottom: 1.125rem; }
.step-nav { display: flex; gap: 0.75rem; margin-top: 1.125rem; }
.step-btn { flex: 1; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 0.375rem; }
.step-btn svg { width: 1.125rem; height: 1.125rem; }
.step-btn.primary { background: var(--accent-blue); color: white; }
.step-btn:active { transform: scale(0.98); }

/* Goal Form */
.goal-icon-selector { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 1.375rem; flex-wrap: wrap; }
.goal-icon-btn { width: 3.625rem; height: 3.625rem; border-radius: var(--radius-lg); background: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition-fast); }
.goal-icon-btn svg { width: 1.625rem; height: 1.625rem; }
.goal-icon-btn.active { background: var(--accent-blue); color: white; }
.goal-icon-btn:active { transform: scale(0.95); }
.delete-btn { width: 100%; padding: 1rem; color: var(--accent-red); font-size: 1rem; text-align: center; margin-top: 0.5rem; }

/* Reminder Form */
.reminder-type-selector { display: flex; gap: 0.75rem; margin-bottom: 1.125rem; }
.reminder-type-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.reminder-type-btn svg { width: 1.125rem; height: 1.125rem; }
.reminder-type-btn.active { background: var(--accent-blue); color: white; }
.repeat-selector { margin-bottom: 1.125rem; }
.repeat-label { font-size: 0.9375rem; color: var(--text-tertiary); margin-bottom: 0.5rem; display: block; }
.repeat-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.repeat-btn { padding: 0.75rem 1rem; background: var(--bg-card); border-radius: var(--radius-full); font-size: 0.9375rem; color: var(--text-secondary); }
.repeat-btn.active { background: var(--accent-blue); color: white; }

/* Filters & Search */
.filter-section { margin-bottom: 1.125rem; }
.filter-label { font-size: 0.9375rem; color: var(--text-tertiary); margin-bottom: 0.5rem; display: block; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-chip { padding: 0.75rem 1rem; background: var(--bg-card); border-radius: var(--radius-full); font-size: 0.9375rem; color: var(--text-secondary); }
.filter-chip.active { background: var(--accent-blue); color: white; }
.filter-actions { display: flex; gap: 0.75rem; margin-top: 1.125rem; }
.filter-btn { flex: 1; padding: 1rem; border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; }
.filter-btn.primary { background: var(--accent-blue); color: white; }
.filter-btn.secondary { background: var(--bg-card); color: var(--text-secondary); }
.search-wrapper { position: relative; margin-bottom: 1.125rem; }
.search-input { width: 100%; padding: 1rem 1.125rem 1rem 3rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); width: 1.25rem; height: 1.25rem; }
.clear-search-btn { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); width: 1.25rem; height: 1.25rem; }
.search-results { max-height: 50vh; overflow-y: auto; }

/* Categories */
.categories-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.125rem; }
.cat-tab { flex: 1; padding: 0.875rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); text-align: center; }
.cat-tab.active { background: var(--accent-blue); color: white; }
.categories-list-container { margin-bottom: 1.125rem; }
.categories-list { display: flex; flex-direction: column; gap: 0.5rem; }
.category-item { display: flex; align-items: center; gap: 0.875rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-lg); cursor: pointer; }
.category-item:active { background: var(--bg-elevated); }
.category-color { width: 2rem; height: 2rem; border-radius: var(--radius-sm); }
.category-info { flex: 1; }
.category-name { font-size: 1rem; font-weight: 500; }
.category-arrow { width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); }
.category-sheet-type { text-align: center; margin-bottom: 1.125rem; }
.category-sheet-type .type-label { font-size: 0.875rem; color: var(--text-tertiary); display: block; margin-bottom: 0.25rem; }
.category-sheet-type .type-value { font-size: 1rem; font-weight: 500; }
.icon-selector, .color-selector { display: flex; gap: 0.625rem; margin-bottom: 1.125rem; flex-wrap: wrap; justify-content: center; }
.icon-btn { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.icon-btn svg { width: 1.375rem; height: 1.375rem; }
.icon-btn.active { background: var(--accent-blue); color: white; }
.color-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; position: relative; }
.color-btn.active::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--accent-blue); border-radius: 50%; }

/* Currency */
.currency-list { display: flex; flex-direction: column; gap: 0.5rem; }
.currency-item { display: flex; align-items: center; gap: 1rem; padding: 1.125rem; background: var(--bg-card); border-radius: var(--radius-lg); }
.currency-item:active { background: var(--bg-elevated); }
.currency-item.active { box-shadow: inset 0 0 0 2px var(--accent-blue); }
.currency-symbol { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 600; }
.currency-info { flex: 1; }
.currency-name { font-size: 1rem; font-weight: 500; display: block; }
.currency-code { font-size: 0.875rem; color: var(--text-tertiary); }
.currency-check { width: 1.375rem; height: 1.375rem; color: var(--accent-blue); opacity: 0; }
.currency-item.active .currency-check { opacity: 1; }

/* Appearance */
.theme-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.625rem; margin-bottom: 1.625rem; }
.theme-preview { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.75rem 0.375rem; border-radius: var(--radius-lg); transition: all var(--transition-fast); }
.theme-preview:active { transform: scale(0.95); }
.theme-preview.active { background: var(--bg-card); box-shadow: inset 0 0 0 2px var(--accent-blue); }
.theme-color { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.theme-color svg { width: 1.25rem; height: 1.25rem; }
.theme-preview span { font-size: 0.75rem; color: var(--text-secondary); }
.theme-preview[data-theme="system"] .theme-color { background: linear-gradient(135deg, #1a1a1a 50%, #f5f5f5 50%); }
.theme-preview[data-theme="amoled"] .theme-color { background: #000; border: 1px solid rgba(255,255,255,0.1); }
.theme-preview[data-theme="dark"] .theme-color { background: #121212; }
.theme-preview[data-theme="light"] .theme-color { background: #f5f5f5; border: 1px solid rgba(0,0,0,0.1); }
.theme-preview[data-theme="sepia"] .theme-color { background: #f4ecd8; border: 1px solid rgba(0,0,0,0.1); }
.scale-section { padding: 1.125rem; background: var(--bg-card); border-radius: var(--radius-lg); }
.scale-label { display: flex; justify-content: space-between; margin-bottom: 0.75rem; }
.scale-label span { font-size: 0.9375rem; color: var(--text-secondary); }
.scale-value { font-weight: 600; color: var(--text-primary); }
.scale-slider { width: 100%; height: 0.375rem; background: var(--bg-elevated); border-radius: var(--radius-full); appearance: none; outline: none; }
.scale-slider::-webkit-slider-thumb { appearance: none; width: 1.375rem; height: 1.375rem; background: var(--accent-blue); border-radius: 50%; cursor: pointer; }
.scale-slider::-moz-range-thumb { width: 1.375rem; height: 1.375rem; background: var(--accent-blue); border-radius: 50%; cursor: pointer; border: none; }

/* Transaction Detail */
.transaction-detail-header { text-align: center; margin-bottom: 1.375rem; }
.transaction-detail-icon { width: 4.25rem; height: 4.25rem; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.transaction-detail-icon svg { width: 2rem; height: 2rem; }
.transaction-detail-amount { font-size: 2.25rem; font-weight: 600; }
.transaction-detail-amount.positive { color: var(--accent-green); }
.transaction-detail-info { background: var(--bg-card); border-radius: var(--radius-lg); padding: 0.25rem 0; margin-bottom: 1.375rem; }
.transaction-detail-actions { display: flex; gap: 0.75rem; }
.detail-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-lg); font-size: 1rem; color: var(--text-secondary); }
.detail-action-btn.danger { color: var(--accent-red); }
.detail-action-btn svg { width: 1.125rem; height: 1.125rem; }
.detail-action-btn:active { background: var(--bg-elevated); }

/* Achievement Detail */
.achievement-detail-content { text-align: center; padding: 1.5rem 0; }
.achievement-detail-icon-wrapper { position: relative; width: 7.5rem; height: 7.5rem; margin: 0 auto 1.5rem; }
.achievement-detail-icon-bg { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accent-blue) calc(var(--progress, 0) * 360deg), var(--bg-elevated) 0); padding: 4px; }
.achievement-detail-icon-bg::before { content: ''; position: absolute; inset: 4px; background: var(--bg-secondarydefault); border-radius: 50%; }
.achievement-detail-icon { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.achievement-detail-icon img { width: 4.5rem; height: 4.5rem; }
.achievement-detail-title { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.5rem; }
.achievement-detail-desc { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1rem; }
.achievement-detail-progress { font-size: 1.125rem; font-weight: 600; color: var(--accent-blue); }

/* Confirm */
.confirm-content { text-align: center; padding: 1.5rem 0; }
.confirm-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.confirm-text { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1.5rem; white-space: pre-line; }
.confirm-actions { display: flex; gap: 0.75rem; }
.confirm-btn { flex: 1; padding: 1rem; border-radius: var(--radius-lg); font-size: 1rem; font-weight: 500; }
.confirm-btn.cancel { background: var(--bg-card); color: var(--text-secondary); }
.confirm-btn.danger { background: var(--accent-red); color: white; }

/* Toast - One UI Style */
.toast-container { position: fixed; top: calc(var(--safe-area-top) + 0.75rem); left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 400px; z-index: 1001; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-xl); animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; pointer-events: auto; }
.theme-light .toast, .theme-sepia .toast { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.theme-light .toast, .theme-sepia .toast { color: #1a1a1a; }
.toast svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.toast.success svg { color: var(--accent-green); }
.toast.error svg { color: var(--accent-red); }
.toast span { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: inherit; }
.theme-light .toast span, .theme-sepia .toast span { color: #1a1a1a; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-0.5rem); } }

/* App Notification - One UI Style */
.app-notification { position: fixed; top: calc(var(--safe-area-top) + 0.75rem); left: 50%; transform: translateX(-50%) translateY(-100%); width: calc(100% - 2rem); max-width: 400px; background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-xl); padding: 1rem 1.25rem; z-index: 1000; opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; gap: 0.875rem; }
.theme-light .app-notification, .theme-sepia .app-notification { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.app-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.notif-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--accent-blue); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.125rem; color: var(--text-primary); }
.theme-light .notif-title, .theme-sepia .notif-title { color: #1a1a1a; }
.notif-desc { font-size: 0.875rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-light .notif-desc, .theme-sepia .notif-desc { color: rgba(0, 0, 0, 0.6); }

/* Success Overlay */
.success-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2000;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.success-overlay.show {
  opacity: 1;
  visibility: visible;
}

.success-overlay.show .success-content {
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-content {
  text-align: center;
  padding: 2rem;
}

.success-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: successBounce 0.6s ease 0.2s;
}

.success-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.success-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.success-amount {
  font-size: 2rem;
  font-weight: 700;
 color: var(--text-primary);
}

.success-amount.positive {
  color: var(--accent-green);
}

@keyframes successPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes successBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}


/* Loading */
.loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 500; }
.loading-spinner { width: 2.5rem; height: 2.5rem; border: 3px solid rgba(255,255,255,0.2); border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* Custom Icon */
.custom-icon { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; width: 1em; height: 1em; vertical-align: middle; }

/* LEADERBOARD */
.leaderboard-button{
  display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    padding: 1.25rem;
    margin: 1rem 0;
    position: relative;
    /* z-index: 0; */
    overflow: visible;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* underglow */
.leaderboard-button::after{
  content: "";
  position: absolute;
  inset: 0;              /* вместо left/right/width/height */
  top: 14px;             /* смещение вниз как в рефе */

  z-index: -1;

  transform: scale(0.92);
  filter: blur(var(--glow-blur, 18px));     /* дефолт! */
  opacity: var(--glow-opacity, 0.95);       /* дефолт! */

  background: linear-gradient(
    to left,
    var(--glow-1, var(--gradient-primary)),
    var(--glow-2, var(--gradient-secondary)),
    var(--glow-1, var(--gradient-primary))
  );

  background-size: 200% 200%;
  animation: leaderboardGlow var(--glow-speed, 9.25s) linear infinite; /* дефолт! */
}

@keyframes leaderboardGlow{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .leaderboard-button::after{ animation: none; }
}



.leaderboard-button:active {
  transform: scale(0.98);
}

.leaderboard-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
}

.leaderboard-button-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.leaderboard-button-title {
  font-size: 1rem;
  font-weight: 600;
}

.leaderboard-button-desc {
  font-size: 0.875rem;
  opacity: 0.5;
}

.my-position-card {
    margin: 0 0rem 1rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.my-position-card:active {
  background: var(--bg-elevated);
}

.my-position-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.my-position-avatar-wrapper {
  flex-shrink: 0;
}

.my-position-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.my-position-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.my-position-avatar svg {
  width: 2rem;
  height: 2rem;
}

.my-position-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.my-position-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.my-position-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.my-position-rank {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-blue);
  background: rgba(var(--accent-blue-rgb, 33, 150, 243), 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.my-position-wealth {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.my-position-label {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.my-position-total {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.my-position-rank-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rank-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rank-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rank-next {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.rank-progress-bar {
  width: 100%;
  height: 0.5rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rank-progress-fill {
  height: 100%;
  background: var(--accent-blue);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.rank-left {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Podium */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  margin-bottom: 1rem;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  transition: transform 0.2s;
}

.podium-place:active {
  transform: scale(0.95);
}

.podium-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.podium-crown {
  position: absolute;
  top: -1.5rem;
  color: #FFD700;
  animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5rem); }
}

.podium-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.podium-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.podium-first .podium-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-color: #FFD700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.podium-second .podium-avatar {
  border-color: #C0C0C0;
}

.podium-third .podium-avatar {
  border-color: #CD7F32;
}

.podium-rank {
  position: absolute;
  bottom: -0.25rem;
  right: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.podium-first .podium-rank {
  background: #FFD700;
  color: #000;
}

.podium-second .podium-rank {
  background: #C0C0C0;
  color: #000;
}

.podium-third .podium-rank {
  background: #CD7F32;
}

.podium-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-amount {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.podium-base {
  width: 100%;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: height 0.3s;
}

.podium-base-1 {
  height: 6rem;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
}

.podium-base-2 {
  height: 4.5rem;
  background: linear-gradient(180deg, #C0C0C0 0%, #A9A9A9 100%);
}

.podium-base-3 {
  height: 3.5rem;
  background: linear-gradient(180deg, #CD7F32 0%, #B8860B 100%);
}

/* Leaderboard List */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

.lb-user-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lb-user-card:active {
  background: var(--bg-elevated);
}

.lb-user-rank {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 2rem;
  text-align: center;
}

.lb-user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.lb-user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.lb-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lb-user-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.lb-user-badge {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.lb-user-amount {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-blue);
}

/* User Profile View */
.user-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  gap: 0.5rem;
}

.user-profile-avatar-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
}

.user-profile-rank {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  background: var(--bg-card);
  border-radius: var(--radius-full);
}

.user-profile-section {
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}

.user-profile-section .section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.view-all-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.view-all-btn:active {
  transform: scale(0.95);
  background: var(--bg-elevated);
}

.view-all-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.user-balance-card {
  padding: 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.user-balance-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.user-balance-total {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.user-goals-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-goal-item {
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.user-goal-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.user-goal-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.user-goal-amount {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}

.activity-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.activity-icon.achievement {
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.activity-icon.goal {
  background: linear-gradient(135deg, var(--accent-green), #10B981);
}

.activity-icon.rank {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
}

.activity-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.activity-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.activity-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.activity-time {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.125rem;
}

.user-profile-hidden {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  color: var(--text-secondary);
  text-align: center;
}

.user-profile-hidden svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.5;
}

.privacy-placeholder {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.privacy-placeholder-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.privacy-placeholder-overlay svg {
  width: 1rem;
  height: 1rem;
}

.privacy-placeholder-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.privacy-placeholder-line {
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  opacity: 0.7;
}

.privacy-placeholder-line.w-40 { width: 40%; }
.privacy-placeholder-line.w-50 { width: 50%; }
.privacy-placeholder-line.w-70 { width: 70%; }
.privacy-placeholder-line.w-80 { width: 80%; }

.privacy-placeholder-grid {
  display: flex;
  gap: 0.375rem;
}

.privacy-placeholder-tile {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  opacity: 0.7;
}

.privacy-placeholder-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.privacy-placeholder-item {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.achievements-preview.privacy-placeholder,
.user-goals-list.privacy-placeholder {
  display: block;
}

.achievements-preview.privacy-placeholder {
  background: var(--bg-card);
  padding: 0.75rem;
}

.activity-feed.privacy-placeholder {
  background: var(--bg-card);
  padding: 0.75rem;
}

/* Privacy Settings */
.privacy-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem 0;
}

.privacy-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  transition: background 0.2s;
}

.privacy-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.privacy-icon i,
.privacy-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.privacy-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.privacy-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.privacy-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.sheet-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
  margin: -0.5rem 0 1rem 0;
  opacity: 0.7;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(128, 128, 128, 0.3);
  border: 2px solid rgba(128, 128, 128, 0.2);
  border-radius: var(--radius-full);
  transition: all 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0.125rem;
  bottom: 0.125rem;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(1.25rem);
  background: white;
}

/* Media Queries */
@media (max-width: 340px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .pin-pad { grid-template-columns: repeat(3, 4rem); grid-template-rows: repeat(4, 4rem); gap: 0.625rem; }
    .pin-key { width: 4rem; height: 4rem; font-size: 1.5rem; }
}

@media (max-width: 700px) {
    .pin-pad { gap: 0.75rem; }
}



.bottom-fade {
    /* Фиксируем элемент внизу экрана */
    position: fixed;
    bottom: 0;
    left: 0;
    
    /* Растягиваем на всю ширину */
    width: 100%;
    
    /* Высота затемнения (можно настроить под себя, например 80px или 5rem) */
    height: 100px; 
    
    /* Градиент от прозрачного к цвету фона текущей темы */
    background: linear-gradient(to bottom, transparent 0%, var(--bg-primary) 100%);
    
    /* КРИТИЧНО ВАЖНО: */
    /* Позволяет кликать "сквозь" градиент. Без этого контент внизу будет неактивен */
    pointer-events: none;
    
    /* Поднимаем слой выше остального контента */
    z-index: 99;
}