* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}


body {
    height: 100vh;
}

.main-container {
    height: 100vh;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;

    /* Хедор */
    .header {
        background: linear-gradient(135deg, #5468d5 0%, #653c88 100%);
        color: white;
        text-align: center;
        padding: 15px;
        font-size: 22px;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Основной контент */
    .content {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        transition: all 0.6s ease-out;

        /* Флеш сообщения */
        .flash-block {
          width: 100%;
          max-width: 500px;
          margin: 0 auto;
          border-radius: 15px;
          border: 1px solid;
          color: black;
          text-align: center;
          padding: 10px;
          overflow: hidden;
          min-height: 60px;
          max-height: 100px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.5s ease-out;
          transform-origin: top;

        }

        .flash-block.hiding {
          max-height: 0;
          opacity: 0;
          padding: 0;
          margin: 0;
          border: 0;
          transform: translateY(-100%) scaleY(0);  /* ← Вверх + сжатие */
        }

        .success-flash {
           background: #7fffd4;
           border-color: #00704b;
        }
        .error-flash {
           content: "❌ ";
           background: #ffb5b3;
           border-color: #850300;
        }

        .error-flash:before {
        }

        /* Цвета фона операци */
        .bg-expense {
            background-color: #e74c3c;
        }

        .bg-income {
            background-color: #9b59b6;
        }

        .bg-profitably {
            background-color: #f39c12;
        }

        .bg-profit {
            background-color: #27ae60;
        }

        /* Цвета текста операций */
        .color-expense {
            color: #e74c3c;
        }

        .color-income {
            color: #9b59b6;
        }

        .color-profitably {
            color: #f39c12;
        }

        .color-profit {
            color: #27ae60;
        }

        /* Жирный текст */
        .bold-text {
            font-weight: bold;
        }
    }

    /* Футер */
    .footer {
        background: linear-gradient(135deg, #5468d5 0%, #653c88 100%);
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        position: sticky;
        bottom: 0;
        z-index: 100;

        .footer-btn {
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            padding: 10px;
            border-radius: 8px;
            text-decoration: none;
            transition: background-color 0.2s;
        }

        .footer-btn:hover {
            background-color: #34495e;
        }

        .footer-btn.active {
            background-color: #3498db;
        }

        .footer-icon {
            font-size: 24px;
        }
    }
}