/* ==========================================================================
   FINANCE APP — PREMIUM DESIGN SYSTEM
   Централизованное хранилище всех CSS-переменных и стилей
   ========================================================================== */

/* Golos Text — основной шрифт (Google Fonts) */
/* Разработан для Госуслуг РФ: стабильность, надёжность, отличные цифры и кириллица */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  /* =========================================
     ЦВЕТОВАЯ ПАЛИТРА
     ========================================= */

  /* Primary — Emerald (зелёный для доходов, позитивных действий) */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;

  /* Secondary — Blue (синий для акцентов, переводов) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Danger — Red (красный для расходов, удалений) */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Warning — Amber (жёлтый для предупреждений) */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* Neutrals — Gray (серый для текста, бордеров, фонов) */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* =========================================
     ГРАДИЕНТЫ
     ========================================= */

  /* Фон страницы — тонкий градиент серый → белый */
  --gradient-bg-page: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);

  /* Hero-секция — emerald → blue диагональный градиент */
  --gradient-hero: linear-gradient(135deg, #047857 0%, #1d4ed8 100%);

  /* Subtle gradient для карточек */
  --gradient-card: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);

  /* =========================================
     ТЕНИ (4 уровня)
     ========================================= */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Премиальные тени с цветом */
  --shadow-emerald: 0 10px 15px -3px rgba(4, 120, 87, 0.15), 0 4px 6px -2px rgba(4, 120, 87, 0.08);
  --shadow-blue: 0 10px 15px -3px rgba(29, 78, 216, 0.15), 0 4px 6px -2px rgba(29, 78, 216, 0.08);

  /* =========================================
     ТИПОГРАФИКА
     ========================================= */

  /* Font family */
  --font-sans: 'Golos Text', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes — стандартные размеры для sans-serif */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */

  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* =========================================
     SPACING (система отступов)
     ========================================= */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* =========================================
     СКРУГЛЕНИЯ (border radius)
     ========================================= */

  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;  /* полный круг */

  /* =========================================
     АНИМАЦИИ (durations & easings)
     ========================================= */

  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 320ms;
  --duration-slow: 500ms;

  /* Easings */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* =========================================
     Z-INDEX (слои)
     ========================================= */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* =========================================
     TOUCH TARGETS
     ========================================= */

  --touch-target: 44px; /* минимальный размер для touch */

  /* =========================================
     BREAKPOINTS (для CSS container queries)
     ========================================= */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* =========================================
     LAYOUT
     ========================================= */

  --page-max-width: 1280px;
}

/* =========================================
   БАЗОВЫЕ СТИЛИ
   ========================================= */

body {
  font-family: var(--font-sans);
  font-weight: var(--font-normal);
  color: var(--color-gray-900);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums lining-nums; /* Моноширинные цифры для таблиц */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll; /* Всегда показывать scrollbar */
}

/* Tabular nums для чисел */
.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

/* Фон страницы с градиентом */
.bg-page {
  background: var(--gradient-bg-page);
}

/* Hero gradient */
.bg-hero {
  background: var(--gradient-hero);
}

/* Премиальные тени */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-emerald { box-shadow: var(--shadow-emerald); }
.shadow-blue { box-shadow: var(--shadow-blue); }

/* Скругления */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

/* Transitions */
.transition-fast { transition: all var(--duration-fast) var(--ease-out); }
.transition-normal { transition: all var(--duration-normal) var(--ease-out); }
.transition-slow { transition: all var(--duration-slow) var(--ease-in-out); }

/* =========================================
   ПРЕМИАЛЬНАЯ ТИПОГРАФИКА
   ========================================= */

/* Заголовки (H1) - максимально премиально */
.heading-premium {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
}

/* Подзаголовки (H2-H3) - полужирный */
.subheading-premium {
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}

/* Текст и лейблы - средний вес */
.text-premium {
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: -0.01em;
}

/* =========================================
   PAGE CONTAINER
   FINANCE-ИНТЕРФЕЙС-013: wide-screen — без max-width.
   Класс оставлен для обратной совместимости (если где-то использовался
   снаружи layout). Главный <main> в application.html.erb теперь
   использует Tailwind: w-full px-4 md:px-6 py-6.
   ========================================= */

.page-container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .page-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ==========================================================================
   CATEGORY FILTER STYLES
   Цветные фоны для категорий в dropdown фильтре (как badges)
   ========================================================================== */

/* Родительские категории расходов - как badge-expense */
.category-expense-parent {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-red-700);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.category-expense-parent:hover {
  background-color: rgba(220, 38, 38, 0.15);
}

/* Подкатегории расходов - более светлый вариант */
.category-expense-child {
  background-color: rgba(220, 38, 38, 0.05);
  color: var(--color-red-700);
  border: 1px solid rgba(220, 38, 38, 0.1);
}

.category-expense-child:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* Родительские категории доходов - как badge-income */
.category-income-parent {
  background-color: rgba(4, 120, 87, 0.1);
  color: var(--color-emerald-700);
  border: 1px solid rgba(4, 120, 87, 0.2);
}

.category-income-parent:hover {
  background-color: rgba(4, 120, 87, 0.15);
}

/* Подкатегории доходов - более светлый вариант */
.category-income-child {
  background-color: rgba(4, 120, 87, 0.05);
  color: var(--color-emerald-700);
  border: 1px solid rgba(4, 120, 87, 0.1);
}

.category-income-child:hover {
  background-color: rgba(4, 120, 87, 0.1);
}

/* ==========================================================================
   UTILITY CLASSES FOR INLINE STYLE REPLACEMENT
   Added as part of REFACTORING-001
   ========================================================================== */

/* TEXT COLORS */
.text-var-red-500 { color: var(--color-red-500); }
.text-var-red-600 { color: var(--color-red-600); }
.text-var-red-700 { color: var(--color-red-700); }
.text-var-red-800 { color: var(--color-red-800); }
.text-var-emerald-600 { color: var(--color-emerald-600); }
.text-var-emerald-700 { color: var(--color-emerald-700); }
.text-var-blue-600 { color: var(--color-blue-600); }
.text-var-blue-700 { color: var(--color-blue-700); }
.text-var-amber-600 { color: var(--color-amber-600); }
.text-var-green-600 { color: var(--color-green-600); }
.text-var-gray-500 { color: var(--color-gray-500); }
.text-var-gray-600 { color: var(--color-gray-600); }
.text-var-gray-700 { color: var(--color-gray-700); }
.text-var-gray-800 { color: var(--color-gray-800); }
.text-var-neutral-300 { color: var(--color-neutral-300); }
.text-var-neutral-400 { color: var(--color-neutral-400); }
.text-var-neutral-500 { color: var(--color-neutral-500); }
.text-var-neutral-600 { color: var(--color-neutral-600); }
.text-var-neutral-700 { color: var(--color-neutral-700); }
.text-var-neutral-800 { color: var(--color-neutral-800); }
.text-var-neutral-900 { color: var(--color-neutral-900); }
.text-white-80 { color: rgba(255, 255, 255, 0.8); }
.text-white-70 { color: rgba(255, 255, 255, 0.7); }

/* BACKGROUND COLORS */
.bg-var-red-50 { background-color: var(--color-red-50); }
.bg-var-red-100 { background-color: var(--color-red-100); }
.bg-var-red-600 { background-color: var(--color-red-600); }
.bg-var-emerald-100 { background-color: var(--color-emerald-100); }
.bg-var-emerald-600 { background-color: var(--color-emerald-600); }
.bg-var-emerald-700 { background-color: var(--color-emerald-700); }
.bg-var-blue-100 { background-color: var(--color-blue-100); }
.bg-var-blue-600 { background-color: var(--color-blue-600); }
.bg-var-blue-700 { background-color: var(--color-blue-700); }
.bg-var-amber-500 { background-color: var(--color-amber-500); }
.bg-var-gray-700 { background-color: var(--color-gray-700); }
.bg-var-neutral-50 { background-color: var(--color-neutral-50); }
.bg-var-neutral-100 { background-color: var(--color-neutral-100); }
.bg-var-neutral-200 { background-color: var(--color-neutral-200); }
.bg-var-neutral-300 { background-color: var(--color-neutral-300); }
.bg-var-neutral-800 { background-color: var(--color-neutral-800); }
.bg-red-10 { background-color: rgba(220, 38, 38, 0.1); }
.bg-emerald-10 { background-color: rgba(4, 120, 87, 0.1); }
.bg-blue-10 { background-color: rgba(29, 78, 216, 0.1); }
.bg-gradient-red-badge { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.bg-gradient-red-subtle { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%); }
.bg-gradient-amber-subtle { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%); }
.bg-gradient-gray-subtle { background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-50) 100%); }
.bg-purple-600 { background: #9333ea; }

/* BORDERS */
.border-var-gray-50 { border-color: var(--color-gray-50); }
.border-var-gray-100 { border-color: var(--color-gray-100); }
.border-var-gray-200 { border-color: var(--color-gray-200); }
.border-var-gray-300 { border-color: var(--color-gray-300); }
.border-var-neutral-100 { border-color: var(--color-neutral-100); }
.border-var-neutral-200 { border-color: var(--color-neutral-200); }
.border-var-neutral-300 { border-color: var(--color-neutral-300); }
.border-var-red-200 { border-color: var(--color-red-200); }
.border-var-red-300 { border-color: var(--color-red-300); }
.border-var-amber-300 { border-color: var(--color-amber-300); }
.border-var-emerald-600 { border-color: var(--color-emerald-600); }
.border-2-neutral-200 { border: 2px solid var(--color-neutral-200); }
.border-t-neutral-100 { border-top: 1px solid var(--color-neutral-100); }
.border-b-neutral-100 { border-bottom: 1px solid var(--color-neutral-100); }
.border-l-4-emerald { border-left: 4px solid var(--color-emerald-600); }
.border-l-4-red { border-left: 4px solid var(--color-red-600); }

/* SHADOWS */
.shadow-top { box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1); }

/* COMBINED STYLES */
.card-styled { font-family: var(--font-sans); box-shadow: var(--shadow-md); border-radius: var(--radius-xl); }
.toast-success { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-lg); border-left: 4px solid var(--color-emerald-600); }
.toast-error { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-lg); border-left: 4px solid var(--color-red-600); }
.bottom-sheet { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-xl) var(--radius-xl) 0 0; transition: transform 320ms var(--ease-out); }
.modal-dialog { font-family: var(--font-sans); box-shadow: var(--shadow-xl); border-radius: var(--radius-lg); transition: all 500ms var(--ease-out); }
.backdrop-blur-light { backdrop-filter: blur(2px); transition: opacity 320ms var(--ease-out); }
.backdrop-blur-medium { backdrop-filter: blur(4px); transition: opacity 500ms var(--ease-out); }
.z-modal { z-index: var(--z-modal); }
.z-toast { z-index: var(--z-toast); }

/* ERROR BOXES */
.error-box { background: rgba(220, 38, 38, 0.05); border: 1px solid var(--color-red-300); border-radius: var(--radius-xl); }
.error-box-alt { background-color: rgba(220, 38, 38, 0.05); border: 2px solid rgba(220, 38, 38, 0.2); border-radius: var(--radius-xl); }
.error-banner { background-color: var(--color-red-50); border: 2px solid var(--color-red-200); color: var(--color-red-800); }

/* WARNING BOXES */
.warning-box { background: rgba(245, 158, 11, 0.1); border: 1px solid var(--color-amber-300); }

/* TRANSACTION TYPE BUTTONS */
.btn-expense-active { background: var(--color-red-600); box-shadow: var(--shadow-sm); color: white; }
.btn-income-active { background: var(--color-emerald-700); box-shadow: var(--shadow-sm); color: white; }
.btn-type-inactive { color: var(--color-neutral-700); }

/* TYPOGRAPHY */
.text-2xl-semibold { font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.text-xl-bold { font-size: var(--text-xl); font-weight: var(--font-bold); }
.text-base-normal { font-size: var(--text-base); }
.text-sm-normal { font-size: var(--text-sm); }
.text-xs-normal { font-size: var(--text-xs); }

/* LAYOUT */
.transaction-panel { display: flex; max-height: calc(100vh - 6rem); }
.transaction-panel-inner { max-height: calc(100vh - 6rem); min-height: 0; }
.notifications-dropdown { width: 600px; max-height: 500px; }

/* FILTER BUTTONS */
.filter-btn { background-color: white; border: 1px solid var(--color-gray-300); box-shadow: var(--shadow-sm); }
.filter-btn-active { background-color: var(--color-emerald-50); border: 1px solid var(--color-emerald-600); box-shadow: var(--shadow-sm); }
.filter-btn-icon { color: var(--color-gray-500); }
.filter-btn-icon-active { color: var(--color-emerald-600); }
.filter-btn-text { color: var(--color-gray-700); }
.filter-btn-text-active { color: var(--color-emerald-600); font-weight: 500; }

/* TOOLTIP */
.tooltip-box { background: var(--color-neutral-800); }
.tooltip-arrow { background: var(--color-neutral-800); }

/* SPLITS */
.splits-container { background: var(--color-neutral-50); }
.splits-remove-btn { color: var(--color-neutral-400); }
.splits-add-btn { border-color: var(--color-neutral-300); color: var(--color-neutral-500); }

.text-var-purple-600 { color: #9333ea; }

/* ==========================================================================
   FINANCE-БЕЗОПАСНОСТЬ-017: CSP-safe progress-bar widths
   data-progress="N" → width: N% (no inline style needed)
   ========================================================================== */
[data-progress="0"] { width: 0%; }
[data-progress="1"] { width: 1%; }
[data-progress="2"] { width: 2%; }
[data-progress="3"] { width: 3%; }
[data-progress="4"] { width: 4%; }
[data-progress="5"] { width: 5%; }
[data-progress="6"] { width: 6%; }
[data-progress="7"] { width: 7%; }
[data-progress="8"] { width: 8%; }
[data-progress="9"] { width: 9%; }
[data-progress="10"] { width: 10%; }
[data-progress="11"] { width: 11%; }
[data-progress="12"] { width: 12%; }
[data-progress="13"] { width: 13%; }
[data-progress="14"] { width: 14%; }
[data-progress="15"] { width: 15%; }
[data-progress="16"] { width: 16%; }
[data-progress="17"] { width: 17%; }
[data-progress="18"] { width: 18%; }
[data-progress="19"] { width: 19%; }
[data-progress="20"] { width: 20%; }
[data-progress="21"] { width: 21%; }
[data-progress="22"] { width: 22%; }
[data-progress="23"] { width: 23%; }
[data-progress="24"] { width: 24%; }
[data-progress="25"] { width: 25%; }
[data-progress="26"] { width: 26%; }
[data-progress="27"] { width: 27%; }
[data-progress="28"] { width: 28%; }
[data-progress="29"] { width: 29%; }
[data-progress="30"] { width: 30%; }
[data-progress="31"] { width: 31%; }
[data-progress="32"] { width: 32%; }
[data-progress="33"] { width: 33%; }
[data-progress="34"] { width: 34%; }
[data-progress="35"] { width: 35%; }
[data-progress="36"] { width: 36%; }
[data-progress="37"] { width: 37%; }
[data-progress="38"] { width: 38%; }
[data-progress="39"] { width: 39%; }
[data-progress="40"] { width: 40%; }
[data-progress="41"] { width: 41%; }
[data-progress="42"] { width: 42%; }
[data-progress="43"] { width: 43%; }
[data-progress="44"] { width: 44%; }
[data-progress="45"] { width: 45%; }
[data-progress="46"] { width: 46%; }
[data-progress="47"] { width: 47%; }
[data-progress="48"] { width: 48%; }
[data-progress="49"] { width: 49%; }
[data-progress="50"] { width: 50%; }
[data-progress="51"] { width: 51%; }
[data-progress="52"] { width: 52%; }
[data-progress="53"] { width: 53%; }
[data-progress="54"] { width: 54%; }
[data-progress="55"] { width: 55%; }
[data-progress="56"] { width: 56%; }
[data-progress="57"] { width: 57%; }
[data-progress="58"] { width: 58%; }
[data-progress="59"] { width: 59%; }
[data-progress="60"] { width: 60%; }
[data-progress="61"] { width: 61%; }
[data-progress="62"] { width: 62%; }
[data-progress="63"] { width: 63%; }
[data-progress="64"] { width: 64%; }
[data-progress="65"] { width: 65%; }
[data-progress="66"] { width: 66%; }
[data-progress="67"] { width: 67%; }
[data-progress="68"] { width: 68%; }
[data-progress="69"] { width: 69%; }
[data-progress="70"] { width: 70%; }
[data-progress="71"] { width: 71%; }
[data-progress="72"] { width: 72%; }
[data-progress="73"] { width: 73%; }
[data-progress="74"] { width: 74%; }
[data-progress="75"] { width: 75%; }
[data-progress="76"] { width: 76%; }
[data-progress="77"] { width: 77%; }
[data-progress="78"] { width: 78%; }
[data-progress="79"] { width: 79%; }
[data-progress="80"] { width: 80%; }
[data-progress="81"] { width: 81%; }
[data-progress="82"] { width: 82%; }
[data-progress="83"] { width: 83%; }
[data-progress="84"] { width: 84%; }
[data-progress="85"] { width: 85%; }
[data-progress="86"] { width: 86%; }
[data-progress="87"] { width: 87%; }
[data-progress="88"] { width: 88%; }
[data-progress="89"] { width: 89%; }
[data-progress="90"] { width: 90%; }
[data-progress="91"] { width: 91%; }
[data-progress="92"] { width: 92%; }
[data-progress="93"] { width: 93%; }
[data-progress="94"] { width: 94%; }
[data-progress="95"] { width: 95%; }
[data-progress="96"] { width: 96%; }
[data-progress="97"] { width: 97%; }
[data-progress="98"] { width: 98%; }
[data-progress="99"] { width: 99%; }
[data-progress="100"] { width: 100%; }