/* БАЗОВАЯ КАРТОЧКА КАТЕГОРИИ РАСХОДОВ */
    .expense-cat-card {
      border-radius: 24px;
      padding: 16px;
      box-shadow: 6px 10px 24px -4px rgba(150, 125, 100, 0.22), -3px -3px 10px rgba(255, 255, 255, 0.8), inset 0 1.5px 0 rgba(255, 255, 255, 0.85);
      border: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .expense-cat-card.pink { background: #FCD6CF; color: #4D201A; }
    .expense-cat-card.mint { background: #C8E2D2; color: #1E3F30; }
    .expense-cat-card.blue { background: #D3E7F8; color: #16324F; }

    /* ШАПКА КАТЕГОРИИ */
    .cat-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2px;
    }
    .cat-title-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cat-badge-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 2px 3.5px 8px rgba(35, 30, 20, 0.12), -1px -1px 3px rgba(255, 255, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    .cat-name {
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -0.2px;
    }

    /* КРУГЛАЯ 3D-КНОПКА ПЛЮСИКА (СВЕТЛЕЕ ПЛАШКИ) */
    .cat-add-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.12s ease;
      flex-shrink: 0;
      box-shadow: 2.5px 4.5px 10px rgba(35, 30, 20, 0.14), 1px 1.5px 3px rgba(35, 30, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    .cat-add-btn:active {
      transform: translateY(1.5px);
    }

    /* СПИСОК ПЛАТЕЖЕЙ В КАТЕГОРИИ */
    .cat-items-list {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    /* ОТДЕЛЬНАЯ 3D-БУМАЖЕЧКА ПЛАТЕЖА */
    .expense-paper-slip {
      border-radius: 16px;
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: none;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .expense-paper-slip:hover {
      transform: translateY(-1.5px);
    }

    .expense-item-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .service-logo-circle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 1.5px 3px 6px rgba(35, 30, 20, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .expense-item-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .expense-item-name {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .expense-item-sub {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
      white-space: nowrap;
    }
    .expense-item-price {
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .expense-item-date {
      font-size: 10px;
      font-weight: 700;
      opacity: 0.7;
      white-space: nowrap;
    }

    .expense-item-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    /* СТАТУСНЫЕ ПЛАШКИ: «ОПЛАЧЕНО» И «ОПЛАТИТЬ» */
    .status-pill {
      border-radius: 20px;
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      border: none !important;
      outline: none !important;
      transition: all 0.12s ease;
      white-space: nowrap;
    }
    .status-pill.paid {
      background: #C8E2D2;
      color: #1E3F30;
      box-shadow: 1.5px 3px 7px rgba(45, 88, 71, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .status-pill.unpaid {
      background: #FCE8D5;
      color: #58241B;
      box-shadow: 1.5px 3px 7px rgba(170, 130, 95, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .status-pill.paid .status-dot { background: #2E6B4A; }
    .status-pill.unpaid .status-dot { background: #A0522D; border: none; }

    /* КНОПКА «В МАГАЗИН ↗» (СЛИВОЧНЫЙ #FDF1CC, БЕЗ РАМОК) */
    .expense-shop-btn {
      background: #FDF1CC;
      color: #5B481D;
      border: none !important;
      outline: none !important;
      padding: 5px 9px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      box-shadow: 1.5px 2.5px 5px rgba(190, 170, 110, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.12s ease;
      white-space: nowrap;
      cursor: pointer;
    }
    .expense-shop-btn:hover {
      transform: translateY(-1px);
      box-shadow: 2px 3.5px 7px rgba(190, 170, 110, 0.32);
    }
    .expense-shop-btn:active {
      transform: translateY(1px);
    }
    .expense-shop-btn:focus,
    .expense-shop-btn:focus-visible,
    .status-pill:focus,
    .status-pill:focus-visible,
    button:focus,
    button:focus-visible {
      outline: none !important;
    }

    /* ТАБ-БАР МОБИЛКИ ВНИЗУ */
    .tabbar-box {
      background: #F5ECE0;
      border-radius: 26px;
      padding: 6px 8px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      /* 3D-Бумага: свет сверху-слева, тень снизу-справа (Закон Ани) */
      box-shadow: 6px 12px 28px -4px rgba(140, 115, 85, 0.26), 2px 4px 8px rgba(140, 115, 85, 0.12), -2.5px -2.5px 8px rgba(255, 255, 255, 0.95), inset 1px 1.5px 0 rgba(255, 255, 255, 0.95) !important;
      border: none !important;
    }
    .tab-btn {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #7A6C5B;
      text-decoration: none;
    }
    .tab-btn.active {
      background: #FCD6CF;
      color: #4D201A;
      box-shadow: 2px 3px 6px rgba(150, 80, 75, 0.25);
    }

    /* ======================================================== */
    /* ТОЧНЫЕ 3D-БУМАЖНЫЕ ЦВЕТА И ТЕНИ                          */
    /* ======================================================== */

    /* 1. РОЗОВАЯ КАТЕГОРИЯ: ИИ СЕРВИСЫ */
    .pink .cat-badge-icon { background: #FFF2EF; color: #4D201A; }
    .pink .cat-add-btn { background: #FFF2EF; color: #4D201A; }
    .pink .expense-paper-slip {
      background: #FFF3F0;
      color: #4D201A;
      box-shadow: 3px 5.5px 14px rgba(70, 25, 20, 0.15), 1px 2px 4px rgba(70, 25, 20, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
    }
    .pink .service-logo-circle { background: #FFE8E3; }

    /* 2. МЯТНАЯ КАТЕГОРИЯ: ИНТЕРНЕТ И СВЯЗЬ */
    .mint .cat-badge-icon { background: #E8F6EE; color: #1E3F30; }
    .mint .cat-add-btn { background: #E8F6EE; color: #1E3F30; }
    .mint .expense-paper-slip {
      background: #F0F8F3;
      color: #1E3F30;
      box-shadow: 3px 5.5px 14px rgba(30, 55, 40, 0.15), 1px 2px 4px rgba(30, 55, 40, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
    }
    .mint .service-logo-circle { background: #DCF2E4; }

    /* 3. ГОЛУБАЯ КАТЕГОРИЯ: VPN */
    .blue .cat-badge-icon { background: #EDF6FD; color: #16324F; }
    .blue .cat-add-btn { background: #EDF6FD; color: #16324F; }
    .blue .expense-paper-slip {
      background: #F1F7FD;
      color: #16324F;
      box-shadow: 3px 5.5px 14px rgba(25, 50, 80, 0.15), 1px 2px 4px rgba(25, 50, 80, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
    }
    .blue .service-logo-circle { background: #E2F0FC; }


    /* ======================================================== */
    /* ---------------- ДЕСКТОП (КОМПЬЮТЕР) ------------------- */
    /* ======================================================== */
    .desktop-window {
      background: #F8EFE4;
      border-radius: 28px;
      padding: 24px;
      box-shadow: 14px 22px 48px -6px rgba(160, 135, 110, 0.30), 4px 6px 14px rgba(160, 135, 110, 0.14), -4px -4px 14px rgba(255, 255, 255, 0.9);
      border: none;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 24px;
      min-height: 740px;
    }
    @media (max-width: 900px) {
      .desktop-window { grid-template-columns: 1fr; }
    }

    /* БОКОВОЕ МЕНЮ */
    .desk-sidebar {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }