@font-face { font-family: 'Merchant Copy'; src: url('fonts/Merchant%20Copy.ttf') format('truetype'); }
@font-face { font-family: 'Merchant Copy Doublesize'; src: url('fonts/Merchant%20Copy%20Doublesize.ttf') format('truetype'); }
@font-face { font-family: 'Cyrillic Fallback'; src: local('Courier New'), local('Courier'), local('monospace'); size-adjust: 70%; unicode-range: U+0400-04FF, U+0500-052F; }
@font-face { font-family: 'Cyrillic Fallback Doublesize'; src: local('Courier New'), local('Courier'), local('monospace'); size-adjust: 70%; unicode-range: U+0400-04FF, U+0500-052F; }

body {
    background-color: #FDFDF6; color: #000;
    font-family: 'Merchant Copy', 'Cyrillic Fallback', 'Courier New', Courier, monospace;
    font-size: 24px; line-height: 1.2;
    display: flex; justify-content: center; margin: 0; padding: 20px;
    min-height: 100vh; box-sizing: border-box; 
}

#app {
    width: 100%; max-width: 400px;
    display: flex; flex-direction: column; flex-grow: 1;
    position: relative; 
}

.view { display: flex; flex-direction: column; flex-grow: 1; width: 100%; }
.hidden { display: none !important; }

/* =========================================
   ОНБОРДИНГ (АНИМАЦИИ И СТИЛИ)
========================================= */
#onboarding-view {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; z-index: 100;
}

.onboarding-step {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    background-color: #FDFDF6;
    transform: translateY(100%); opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    pointer-events: none;
}

.onboarding-step.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.onboarding-step.exit { transform: translateY(-100%); opacity: 0; }

.onboarding-content {
    flex-grow: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; width: 100%;
}

/* Прижатие контента к верху (для шагов 2-5) */
.onboarding-content.top-aligned {
    justify-content: flex-start;
    padding-top: 30px;
}
.top-aligned .onboarding-logo {
    margin-top: 0;
    margin-bottom: 20px;
}

.onboarding-logo {
    background-color: #000; color: #fff; padding: 15px 30px;
    font-size: 1.6em; font-family: 'Merchant Copy Doublesize', 'Courier New', Courier, monospace;
    margin: 20px 0; text-align: center;
}

.onboarding-text { font-size: 1.1em; text-align: center; }
.onboarding-text-small { font-size: 0.9em; text-align: center; color: #555; }

.grey-box { background-color: #DCDCDC; padding: 5px 10px; font-size: 0.8em; display: inline-block; }
.onboarding-mockup { width: 100%; }

/* Поле выбора валюты */
.currency-setup-input {
    background-color: #000; color: #fff;
    font-family: 'Merchant Copy Doublesize', 'Courier New', Courier, monospace;
    font-size: 1.4em; text-align: center;
    width: 140px; padding: 15px; border: none; outline: none;
    text-transform: uppercase;
}
.currency-setup-input:focus { outline: 2px solid #ccc; }
.currency-setup-input::placeholder { color: #555; }

.onboarding-footer { display: flex; justify-content: center; padding: 40px 0; }

.next-btn {
    font-family: 'Merchant Copy Doublesize', 'Courier New', Courier, monospace;
    font-size: 1.4em; background: transparent; border: none; cursor: pointer; color: #555;
}
.next-btn:active { color: #000; }

/* =========================================
   ГЛАВНЫЙ ЭКРАН (MAIN VIEW)
========================================= */
.top-bar { background-color: #000; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; margin-bottom: 20px; }
.top-bar h1 { font-family: 'Merchant Copy Doublesize', 'Courier New', Courier, monospace; margin: 0; font-size: 1.1em; font-weight: normal; }
.avatar-placeholder { width: 35px; height: 35px; background-color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; }
#saved-receipts-list { flex-grow: 1; display: flex; flex-direction: column; gap: 15px; }
.receipt-capsule { background-color: #DCDCDC; padding: 15px 20px; display: flex; justify-content: space-between; font-size: 0.9em; cursor: pointer; }
.receipt-capsule:active { background-color: #cecece; }
.main-footer { margin-top: auto; padding: 30px 0; display: flex; justify-content: center; }
#btn-new-receipt { background-color: #000; color: #fff; border: none; font-family: inherit; font-size: 0.9em; padding: 15px 30px; cursor: pointer; }
#btn-new-receipt:active { background-color: #333; }

/* =========================================
   ШАПКА ВНУТРИ ЧЕКА
========================================= */
.receipt-top-bar { display: flex; align-items: center; justify-content: space-between; margin: 5px 0 15px 0; }
.back-btn { width: 40px; height: 40px; background-color: #222; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; border-radius: 4px; padding: 0; }
.back-btn:active { background-color: #444; }
.receipt-title-container { display: flex; align-items: center; justify-content: center; gap: 8px; }
.receipt-name-input { font-family: 'Merchant Copy Doublesize', 'Cyrillic Fallback Doublesize', 'Courier New', Courier, monospace; font-size: 1.05em; text-align: center; width: 150px; border-bottom: 1px dashed transparent; }
.receipt-name-input:focus { border-bottom: 1px dashed #ccc; }
.edit-icon { opacity: 0.8; }

/* =========================================
   СТРУКТУРА ЧЕКА
========================================= */
hr { border: none; border-top: 1px dashed #000; width: 100%; margin: 15px 0; }
.header-info { display: flex; justify-content: space-between; font-size: 1em; }
.col { display: flex; flex-direction: column; gap: 5px; }
.col span { white-space: nowrap; }
input, textarea { background: transparent; border: none; color: #000; font-family: inherit; font-size: inherit; outline: none; padding: 0; margin: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.budget-input { width: 60px; border-bottom: 1px dashed transparent; text-align: right;}
.budget-input:focus { border-bottom: 1px dashed #ccc; }
.currency-input { width: 50px; border-bottom: 1px dashed transparent; text-transform: uppercase; }
.currency-input:focus { border-bottom: 1px dashed #ccc; }
.note-section { text-align: center; margin-top: 20px; display: flex; flex-direction: column; align-items: center; }
.note-title { margin-bottom: 5px; font-size: 0.9em; } 
.note-input { width: 90%; text-align: center; resize: none; color: #555; font-size: 0.9em; }
h2 { font-family: 'Merchant Copy Doublesize', 'Cyrillic Fallback Doublesize', 'Courier New', Courier, monospace; text-align: center; font-size: 0.65em; margin: 10px 0; font-weight: normal; }
.list-headers { display: flex; justify-content: space-between; font-size: 0.85em; color: #555; margin-bottom: 15px; }
.list-headers span:nth-child(1) { flex: 2.2; }
.list-headers span:nth-child(2) { flex: 1.1; text-align: center; }
.list-headers span:nth-child(3) { flex: 1.5; text-align: right; }
.item-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 1em; }
.item-row.add-btn { cursor: pointer; color: #555; justify-content: flex-start; gap: 10px; }
.item-row.add-btn:hover { color: #000; }
.item-index { width: 25px; }
.item-name { flex: 2.2; border-bottom: 1px dashed transparent; }
.item-name:focus { border-bottom: 1px dashed #ccc; }
.item-qty-container { flex: 1.1; text-align: center; white-space: nowrap; }
.item-qty { width: 40px; text-align: center; border-bottom: 1px dashed transparent; }
.item-qty:focus { border-bottom: 1px dashed #ccc; }
.item-price-container { flex: 1.5; text-align: right; white-space: nowrap; }
.item-price { width: 75px; text-align: right; border-bottom: 1px dashed transparent; }
.item-price:focus { border-bottom: 1px dashed #ccc; }
.footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 40px; }
.footer-icons { display: flex; gap: 10px; }
.icon-placeholder { width: 45px; height: 45px; background-color: #222; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.6em; border-radius: 4px; cursor: pointer; }
.total-section { font-family: 'Merchant Copy Doublesize', 'Cyrillic Fallback Doublesize', 'Courier New', Courier, monospace; font-size: 0.8em; white-space: nowrap; }