/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: 'Segoe UI', 'Arial', sans-serif; background: #d0d0d0; }

/* ===== TOOLBAR ===== */
#emulator-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 36px; background: #1e1e1e; color: #fff; padding: 0 8px; z-index: 100;
    flex-shrink: 0;
}
.toolbar-controls { display: flex; gap: 4px; align-items: center; }
.toolbar-icon-btn {
    background: #444; color: #fff; border: none; border-radius: 6px;
    width: 34px; height: 28px; cursor: pointer; font-size: 16px; transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.toolbar-icon-btn:hover { background: #5a5a5a; }

/* Screen selector dropdown */
#screen-selector {
    background: #333; color: #fff; border: 1px solid #555; border-radius: 6px;
    padding: 4px 8px; font-size: 13px; cursor: pointer; min-width: 0; flex: 1; max-width: 220px;
}
#screen-selector option { background: #333; }

/* ===== SIMULATION PANEL ===== */
.sim-panel {
    position: fixed; top: 48px; right: 0; width: 360px; max-height: calc(100vh - 48px);
    background: #fff; border-left: 2px solid #ccc; box-shadow: -4px 0 20px rgba(0,0,0,.2);
    z-index: 90; overflow-y: auto; padding: 20px;
}
.sim-panel.hidden { display: none; }
.sim-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-weight: 700; font-size: 16px; }
.sim-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #666; }
.sim-section { margin-bottom: 18px; }
.sim-section h4 { margin-bottom: 8px; font-size: 14px; color: #555; }
.sim-trk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sim-trk-btn {
    font-size: 11px; padding: 6px 4px; border: 1px solid #ccc; border-radius: 6px;
    cursor: pointer; background: #f0f0f0; text-align: center; line-height: 1.3;
}
.sim-trk-btn:hover { background: #e0e0e0; }
.sim-section label { font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; }

/* ===== KIOSK FRAME ===== */
.kiosk {
    position: relative; background: #f4f7f4; overflow: hidden;
    transform-origin: top left;
}
.kiosk.horizontal { width: 1920px; height: 1080px; }
.kiosk.vertical   { width: 1080px; height: 1920px; }
.kiosk-wrapper {
    overflow: hidden;
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px); background: #d0d0d0;
    display: flex; justify-content: center; align-items: flex-start;
}

#screen-container {
    width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
}
#screen-container::-webkit-scrollbar { width: 8px; }
#screen-container::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }

.screen-number {
    position: absolute; bottom: 10px; right: 14px; font-size: 13px;
    color: rgba(0,0,0,.15); font-weight: 600; pointer-events: none; z-index: 5;
}

/* ===== TOAST ===== */
.toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: #222; color: #fff; padding: 16px 36px; border-radius: 14px;
    font-size: 18px; z-index: 200; transition: opacity .3s; box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.toast.hidden { opacity: 0; pointer-events: none; }

/* ===== COMMON COMPONENTS ===== */
.top-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px; background: #fff; border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}
.top-bar .search-input {
    flex: 1; height: 60px; border: 2px solid #ddd; border-radius: 16px;
    padding: 0 24px; font-size: 22px; outline: none; transition: border-color .2s;
}
.top-bar .search-input:focus { border-color: #5cbf6e; }
.top-bar-btn {
    height: 60px; padding: 0 28px; border: none; border-radius: 16px;
    font-size: 22px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.top-bar-btn.secondary { background: #444; color: #fff; }
.top-bar-btn.secondary:hover { background: #333; }
.top-bar-btn.danger { background: #e53935; color: #fff; }
.top-bar-btn.danger:hover { background: #c62828; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: none; border-radius: 16px; font-size: 22px; font-weight: 600;
    cursor: pointer; transition: all .12s; min-height: 60px; padding: 14px 32px;
    user-select: none; -webkit-user-select: none;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: #43b55c; color: #fff; box-shadow: 0 4px 12px rgba(67,181,92,.3); }
.btn-primary:hover:not(:disabled) { background: #389e4d; }
.btn-outline { background: #fff; color: #333; border: 2px solid #ddd; }
.btn-outline:hover:not(:disabled) { border-color: #43b55c; background: #f0faf2; }
.btn-lg { min-height: 72px; font-size: 26px; padding: 18px 40px; border-radius: 18px; }
.btn-xl { min-height: 88px; font-size: 30px; padding: 22px 48px; border-radius: 20px; }
.btn-back { background: #eee; color: #333; font-size: 20px; min-height: 56px; padding: 12px 26px; border-radius: 14px; }
.btn-back:hover { background: #ddd; }

.screen-title {
    font-size: 36px; font-weight: 800; color: #1a1a1a; padding: 28px 40px 12px;
}
.screen-subtitle { font-size: 22px; color: #666; padding: 0 40px 20px; }

/* ===== TILES / CARDS ===== */
.tile-grid {
    display: grid; gap: 20px; padding: 0 40px 32px;
}
.horizontal .tile-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.horizontal .tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.horizontal .tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.vertical .tile-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
.vertical .tile-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
.vertical .tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.tile {
    background: #fff; border-radius: 20px; padding: 16px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s; display: flex; flex-direction: column;
    align-items: center; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.tile:hover { border-color: #43b55c; box-shadow: 0 6px 24px rgba(67,181,92,.15); transform: translateY(-2px); }
.tile:active { transform: scale(.97); }
.tile.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

.tile-img {
    width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 14px;
    margin-bottom: 12px; background: #fafafa;
}
.tile-img-placeholder {
    width: 100%; aspect-ratio: 4/3; border-radius: 14px;
    margin-bottom: 12px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; color: #81c784;
}
.tile-name { font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.tile-price { font-size: 20px; color: #43b55c; font-weight: 800; margin-top: 6px; }

/* ===== E01 START SCREEN ===== */
.start-layout {
    display: flex; flex-direction: column; gap: 0; padding: 0;
    height: calc(100% - 82px); overflow: hidden;
}
.start-main {
    padding: 24px 32px; flex: 1; min-height: 0; overflow-y: auto;
}
.fuel-section { display: flex; flex-direction: column; gap: 16px; }

/* ===== E01 PAGE — NO SCROLL ===== */
.e01-page {
    display: flex; flex-direction: column; height: calc(100% - 82px);
    padding: 16px 28px; gap: 0; overflow: hidden;
}

/* Fuel block */
.e01-fuel-block {
    background: #fff; border-radius: 18px; padding: 16px 22px 14px;
    border: 2px solid #e8e8e8; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.e01-fuel-header {
    font-size: 30px; font-weight: 800; color: #1a1a1a; margin-bottom: 12px;
}
.e01-fuel-row {
    display: flex; align-items: stretch; gap: 14px;
}
.e01-pump-icon {
    font-size: 90px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 90px; filter: hue-rotate(90deg) saturate(1.5);
}
.e01-trk-grid {
    flex: 1; display: grid; gap: 8px;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-columns: repeat(5, 1fr);
}
.vertical .e01-trk-grid {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(3, 1fr);
}
.e01-trk {
    border-radius: 14px; padding: 8px 12px; cursor: pointer;
    border: 3px solid #e0e0e0; transition: all .15s; background: #fff;
    display: flex; align-items: center; gap: 10px;
    min-height: 56px;
}
.e01-trk:hover:not(.e01-trk-off) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.e01-trk:active:not(.e01-trk-off) { transform: scale(.97); }
.e01-trk-off { opacity: .3; cursor: not-allowed; background: #f5f5f5; }
.e01-trk-noz { border-width: 3px; }
.e01-trk-num { font-size: 42px; font-weight: 800; color: #1a1a1a; line-height: 1; flex-shrink: 0; }
.e01-trk-label { font-size: 22px; font-weight: 700; line-height: 1.2; white-space: nowrap; }

/* Bottom row: food + shop */
.e01-bottom-row {
    flex: 1; display: grid; gap: 14px; min-height: 0; margin-top: 20px;
}
.horizontal .e01-bottom-row { grid-template-columns: 1fr 340px; }
.vertical .e01-bottom-row { grid-template-columns: 1fr; }

.e01-food-section { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.e01-food-title { font-size: 28px; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; }
.e01-food-grid {
    display: grid; gap: 10px; flex: 1;
}
.horizontal .e01-food-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.vertical .e01-food-grid { grid-template-columns: repeat(4, 1fr); }

.e01-food-tile {
    background: #fff; border-radius: 14px; padding: 6px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s; display: flex; flex-direction: column;
    align-items: center; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.04);
    overflow: hidden;
}
.e01-food-tile:hover { border-color: #43b55c; transform: translateY(-2px); }
.e01-food-tile:active { transform: scale(.97); }
.e01-food-img {
    width: 100%; flex: 1; object-fit: contain; border-radius: 10px;
    background: #fafafa; min-height: 0;
}
.e01-food-name { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-top: 4px; line-height: 1.2; flex-shrink: 0; }

/* Shop block — height of 2 food rows */
.e01-shop-block {
    background: #fff; border-radius: 18px; padding: 20px 16px;
    border: 2px solid #e8e8e8; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    justify-content: center;
}
.e01-shop-title { font-size: 24px; font-weight: 800; color: #1a1a1a; }
.e01-shop-products {
    display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0;
}
.e01-shop-item {
    display: flex; align-items: center; gap: 12px;
    border-radius: 14px; padding: 8px 12px;
    background: #fafafa;
}
.e01-shop-item-img {
    width: 80px; height: 80px; object-fit: contain; border-radius: 10px; flex-shrink: 0;
}
.e01-shop-item-name { font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.e01-shop-item-price { font-size: 20px; color: #43b55c; font-weight: 700; }
.e01-shop-hint { font-size: 20px; color: #555; line-height: 1.4; }
.e01-shop-input {
    width: 100%; height: 48px; border: 2px solid #ddd; border-radius: 12px;
    text-align: center; font-size: 20px; outline: none; padding: 0 10px;
}
.e01-shop-input:focus { border-color: #43b55c; }

/* TRK tiles on home screen */
.home-trk-grid {
    display: grid; gap: 12px;
}
.horizontal .home-trk-grid { grid-template-columns: repeat(6, 1fr); }
.vertical .home-trk-grid { grid-template-columns: repeat(4, 1fr); }

.home-trk {
    border-radius: 16px; padding: 14px 8px; text-align: center; cursor: pointer;
    border: 2px solid #e0e0e0; transition: all .15s; background: #fff;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 80px; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.home-trk:hover:not(.home-trk-disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.home-trk:active:not(.home-trk-disabled) { transform: scale(.97); }
.home-trk-disabled { opacity: .35; cursor: not-allowed; background: #f0f0f0; }
.home-trk-nozzle { border-width: 3px; }
.home-trk-num { font-size: 22px; font-weight: 800; color: #1a1a1a; }
.home-trk-status { font-size: 13px; font-weight: 600; }
.home-trk-fuel { font-size: 14px; font-weight: 700; }

/* Fuel type colors — now set inline via JS */

/* Categories section */
.categories-section { margin-top: 20px; }
.categories-section h3 { font-size: 28px; font-weight: 800; color: #1a1a1a; margin-bottom: 16px; }
.cat-grid {
    display: grid; gap: 14px;
}
.horizontal .cat-grid { grid-template-columns: repeat(4, 1fr); }
.vertical .cat-grid   { grid-template-columns: repeat(4, 1fr); }

.cat-tile {
    background: #fff; border-radius: 18px; padding: 12px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s; display: flex; flex-direction: column;
    align-items: center; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.cat-tile:hover { border-color: #43b55c; box-shadow: 0 6px 16px rgba(67,181,92,.12); transform: translateY(-2px); }
.cat-tile:active { transform: scale(.97); }
.cat-tile-img {
    width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 12px;
    margin-bottom: 8px; background: #fafafa;
}
.cat-tile-name { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }

/* Barcode input */
#barcode-input {
    height: 44px; border: 2px solid #ddd; border-radius: 10px;
    text-align: center; font-size: 20px; outline: none; padding: 0 12px;
    width: 160px; flex-shrink: 0;
}
#barcode-input:focus { border-color: #43b55c; }

/* ===== TRK GRID (E10) ===== */
.trk-grid {
    display: grid; gap: 16px; padding: 0 40px 28px;
}
.horizontal .trk-grid { grid-template-columns: repeat(4, 1fr); }
.vertical .trk-grid   { grid-template-columns: repeat(3, 1fr); }

.trk-tile {
    background: #fff; border-radius: 20px; padding: 28px; cursor: pointer;
    border: 2px solid #e8e8e8; transition: all .15s; text-align: center; min-height: 120px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.trk-tile:hover:not(.trk-disabled) { border-color: #43b55c; box-shadow: 0 6px 20px rgba(67,181,92,.15); transform: translateY(-2px); }
.trk-tile:active:not(.trk-disabled) { transform: scale(.97); }
.trk-disabled { opacity: .35; cursor: not-allowed; }
.trk-num { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.tile-status { font-size: 22px; margin-top: 6px; font-weight: 600; }
.tile-status.free   { color: #43b55c; }
.tile-status.busy   { color: #e67e22; }
.tile-status.error  { color: #e74c3c; }
.tile-status.nozzle { color: #2196f3; }

/* ===== FUEL CARDS (E11) ===== */
.fuel-grid {
    display: grid; gap: 24px; padding: 0 40px 28px;
}
.horizontal .fuel-grid { grid-template-columns: repeat(4, 1fr); }
.vertical .fuel-grid   { grid-template-columns: repeat(2, 1fr); }

.fuel-card {
    background: #fff; border-radius: 24px; padding: 40px 24px; cursor: pointer;
    border: 3px solid #e8e8e8; transition: all .15s; text-align: center; min-height: 200px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.fuel-card:hover { border-color: #43b55c; box-shadow: 0 8px 28px rgba(67,181,92,.15); transform: translateY(-3px); }
.fuel-card:active { transform: scale(.97); }
.fuel-card-stripe {
    width: 100%; height: 8px; border-radius: 4px; margin-bottom: 24px;
}
.fuel-card-nozzle { font-size: 20px; font-weight: 600; color: #888; margin-bottom: 2px; }
.fuel-card-name { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.fuel-card-price { font-size: 24px; color: #555; font-weight: 700; margin-top: 10px; }
.fuel-card:hover { transform: translateY(-4px); }

/* ===== AMOUNT ENTRY (E12) ===== */
.amount-layout { padding: 0 40px 28px; }
.horizontal .amount-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.vertical .amount-layout   { display: flex; flex-direction: column; gap: 28px; }

.amount-info {
    background: #fff; border-radius: 20px; padding: 28px; border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.amount-info-fuel { font-size: 28px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; }
.amount-info-price { font-size: 20px; color: #666; }

.mode-toggle {
    display: flex; gap: 0; margin-bottom: 24px; border-radius: 16px; overflow: hidden;
    border: 2px solid #ddd;
}
.mode-toggle-btn {
    flex: 1; padding: 18px; border: none; font-size: 22px; font-weight: 700;
    cursor: pointer; background: #f5f5f5; color: #666; transition: all .15s;
}
.mode-toggle-btn.active { background: #43b55c; color: #fff; }

.quick-amounts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.quick-btn {
    padding: 20px; border: 2px solid #ddd; border-radius: 16px; background: #fff;
    font-size: 24px; font-weight: 800; cursor: pointer; transition: all .15s; text-align: center;
}
.quick-btn:hover { border-color: #43b55c; background: #f0faf2; }
.quick-btn:active { transform: scale(.97); }
.quick-btn.selected { border-color: #43b55c; background: #e8f5e9; }

.numpad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 440px;
}
.numpad-btn {
    height: 72px; border: 1px solid #ddd; border-radius: 14px; background: #fff;
    font-size: 30px; font-weight: 600; cursor: pointer; transition: all .1s;
}
.numpad-btn:hover { background: #f0f0f0; }
.numpad-btn:active { background: #ddd; transform: scale(.97); }
.numpad-btn.clear { font-size: 22px; color: #e74c3c; }
.numpad-btn.backspace { font-size: 24px; }

.amount-display {
    text-align: center; font-size: 52px; font-weight: 800; color: #1a1a1a;
    padding: 20px; background: #f8f8f8; border-radius: 16px; margin-bottom: 20px;
    min-height: 90px; display: flex; align-items: center; justify-content: center;
}
.amount-display .unit { font-size: 28px; color: #888; margin-left: 10px; }

/* ===== CART (E13, E23) ===== */
.cart-layout { padding: 0 40px 28px; }
.cart-item {
    display: flex; align-items: center; gap: 18px; background: #fff;
    border-radius: 18px; padding: 18px 24px; margin-bottom: 12px; border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.cart-item-icon { font-size: 36px; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 22px; font-weight: 700; color: #1a1a1a; }
.cart-item-detail { font-size: 20px; color: #888; margin-top: 3px; }
.cart-item-price { font-size: 24px; font-weight: 800; color: #43b55c; white-space: nowrap; }
.cart-item-qty { display: flex; align-items: center; gap: 10px; }
.cart-qty-btn {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid #ddd;
    background: #fff; font-size: 24px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: all .1s;
}
.cart-qty-btn:hover { background: #f0f0f0; }
.cart-qty-btn.remove { color: #e74c3c; border-color: #f5c6cb; }
.cart-qty-btn.remove:hover { background: #fde8e8; }
.cart-qty-num { font-size: 22px; font-weight: 800; min-width: 28px; text-align: center; }
.cart-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 24px 28px; background: #fff; border-radius: 18px; border: 3px solid #43b55c;
    margin-top: 20px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(67,181,92,.1);
}
.cart-total-label { font-size: 28px; font-weight: 800; color: #1a1a1a; }
.cart-total-amount { font-size: 36px; font-weight: 800; color: #43b55c; }

.upsell-section { margin-bottom: 28px; }
.upsell-section h3 { font-size: 24px; font-weight: 800; color: #1a1a1a; margin-bottom: 14px; }
.upsell-grid { display: grid; gap: 14px; }
.horizontal .upsell-grid { grid-template-columns: repeat(4, 1fr); }
.vertical .upsell-grid   { grid-template-columns: repeat(3, 1fr); }

.upsell-card {
    background: #fff; border-radius: 16px; padding: 14px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.upsell-card:hover { border-color: #43b55c; transform: translateY(-2px); }
.upsell-card:active { transform: scale(.97); }
.upsell-card-img {
    width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 10px;
    margin-bottom: 8px; background: #fafafa;
}
.upsell-card-name { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.upsell-card-price { font-size: 20px; color: #43b55c; font-weight: 800; }

.cart-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== BONUS CARD (E14) ===== */
.bonus-layout { padding: 0 40px 28px; }
.horizontal .bonus-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.vertical .bonus-layout   { display: flex; flex-direction: column; gap: 24px; }

.bonus-left {}
.bonus-right {}

.bonus-option {
    background: #fff; border-radius: 20px; padding: 28px; margin-bottom: 16px;
    border: 2px solid #e8e8e8; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.bonus-option:hover { border-color: #43b55c; transform: translateY(-1px); }
.bonus-option:active { transform: scale(.99); }
.bonus-option.selected { border-color: #43b55c; background: #f0faf2; }
.bonus-icon { font-size: 42px; flex-shrink: 0; }
.bonus-text h3 { font-size: 24px; font-weight: 800; color: #1a1a1a; }
.bonus-text p { font-size: 20px; color: #666; margin-top: 4px; }
.phone-input-wrap { margin-top: 16px; }
.phone-input {
    width: 100%; height: 60px; border: 2px solid #ddd; border-radius: 16px;
    padding: 0 20px; font-size: 26px; outline: none; text-align: center;
}
.phone-input:focus { border-color: #43b55c; }

/* ===== PAYMENT METHOD (E15) ===== */
.payment-layout { padding: 0 40px 28px; }
.horizontal .payment-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.vertical .payment-layout   { display: flex; flex-direction: column; gap: 24px; }

.payment-left {}
.payment-right {}

.payment-grid { display: grid; gap: 20px; }
.horizontal .payment-grid { grid-template-columns: repeat(3, 1fr); }
.vertical .payment-grid   { grid-template-columns: 1fr; }

.payment-card {
    background: #fff; border-radius: 22px; padding: 36px 24px; cursor: pointer;
    border: 3px solid #e8e8e8; transition: all .15s; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 180px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.payment-card:hover { border-color: #43b55c; box-shadow: 0 6px 20px rgba(67,181,92,.12); transform: translateY(-2px); }
.payment-card:active { transform: scale(.97); }
.payment-card.selected { border-color: #43b55c; background: #f0faf2; }
.payment-icon { font-size: 56px; margin-bottom: 14px; }
.payment-name { font-size: 26px; font-weight: 800; color: #1a1a1a; }
.payment-desc { font-size: 20px; color: #888; margin-top: 6px; }

.tk-fields {
    max-width: 500px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 12px;
}
.tk-input {
    height: 60px; border: 2px solid #ddd; border-radius: 14px;
    padding: 0 20px; font-size: 22px; outline: none; text-align: center;
}
.tk-input:focus { border-color: #43b55c; }

/* Side food panel on bonus/payment screens */
.side-food-panel h3 { font-size: 22px; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; }
.side-food-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.side-food-card {
    background: #fff; border-radius: 12px; padding: 8px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s; text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
.side-food-card:hover { border-color: #43b55c; }
.side-food-card:active { transform: scale(.97); }
.side-food-card-img {
    width: 100%; height: 220px; object-fit: contain; border-radius: 8px;
    margin-bottom: 4px;
}
.side-food-card-name { font-size: 20px; font-weight: 600; color: #333; }
.side-food-card-price { font-size: 20px; color: #43b55c; font-weight: 700; }

/* ===== PROCESSING (E16) ===== */
.processing-layout {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 600px; padding: 60px; text-align: center;
}
.spinner {
    width: 100px; height: 100px; border: 7px solid #e0e0e0; border-top-color: #43b55c;
    border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 40px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-text { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.processing-sub { font-size: 20px; color: #888; margin-top: 10px; }

/* ===== SUCCESS (E17) ===== */
.success-layout {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 600px; padding: 60px; text-align: center;
}
.success-icon { font-size: 100px; margin-bottom: 24px; }
.success-title { font-size: 40px; font-weight: 800; color: #1a1a1a; }
.success-msg { font-size: 22px; color: #555; margin-top: 12px; max-width: 700px; line-height: 1.5; }
.success-trk { font-size: 60px; font-weight: 800; color: #43b55c; margin: 24px 0; }
.success-timer { font-size: 22px; color: #aaa; margin-top: 14px; }
.success-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }

/* ===== PRODUCT CARD (E22) ===== */
.product-detail { padding: 0 40px 28px; max-width: 1000px; margin: 0 auto; }
.horizontal .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1200px; }
.product-img-wrap {
    width: 100%; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden;
    background: #fafafa; display: flex; align-items: center; justify-content: center;
}
.product-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.product-info { display: flex; flex-direction: column; gap: 18px; }
.product-name { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.product-price { font-size: 30px; font-weight: 800; color: #43b55c; }

.modifier-group { margin-bottom: 18px; }
.modifier-group h4 { font-size: 20px; font-weight: 700; color: #555; margin-bottom: 10px; }
.modifier-options { display: flex; gap: 10px; flex-wrap: wrap; }
.modifier-btn {
    padding: 14px 24px; border: 2px solid #ddd; border-radius: 14px;
    background: #fff; font-size: 20px; cursor: pointer; transition: all .15s;
}
.modifier-btn:hover { border-color: #43b55c; }
.modifier-btn.selected { border-color: #43b55c; background: #e8f5e9; color: #2e7d32; font-weight: 700; }

/* ===== ADMIN (E90) ===== */
.admin-layout {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 600px; padding: 60px; text-align: center;
}
.admin-icon { font-size: 100px; margin-bottom: 24px; }
.admin-title { font-size: 44px; font-weight: 800; color: #1a1a1a; }
.admin-sub { font-size: 22px; color: #666; margin-top: 12px; }
.pulse-ring {
    width: 140px; height: 140px; border-radius: 50%; border: 5px solid #43b55c;
    animation: pulse-ring 1.5s ease-out infinite; margin: 28px 0;
}
@keyframes pulse-ring {
    0% { transform: scale(.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ===== ERROR (E91) ===== */
.error-layout {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 600px; padding: 60px; text-align: center;
}
.error-icon { font-size: 100px; margin-bottom: 24px; }
.error-title { font-size: 36px; font-weight: 800; color: #e74c3c; }
.error-msg { font-size: 22px; color: #666; margin-top: 12px; max-width: 700px; }
.error-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }

/* ===== CONFIRM DIALOG ===== */
.confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 150;
    display: flex; align-items: center; justify-content: center;
}
.confirm-dialog {
    background: #fff; border-radius: 24px; padding: 44px; max-width: 460px;
    text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.25);
}
.confirm-dialog h3 { font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.confirm-dialog p { font-size: 22px; color: #666; margin-bottom: 28px; }
.confirm-actions { display: flex; gap: 14px; justify-content: center; }

/* ===== TRK HOME BLOCK ===== */
.trk-home-block {
    background: #fff; border-radius: 20px; padding: 20px 24px;
    border: 2px solid #e8e8e8; box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.trk-home-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 16px;
}
.trk-home-title {
    font-size: 26px; font-weight: 800; color: #1a1a1a; flex-shrink: 0;
}
.trk-home-scan {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; color: #666; cursor: pointer;
    background: #f8f8f8; padding: 10px 18px; border-radius: 12px;
    border: 1px solid #e0e0e0; white-space: nowrap;
}

/* ===== AMOUNT SCREEN (E12, E18) — REDESIGNED ===== */
.amount-screen {
    padding: 0 40px 32px; max-width: 800px; margin: 0 auto; text-align: center;
}
.amount-header {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.amount-fuel-badge {
    display: flex; gap: 16px; align-items: center;
    padding: 14px 28px; border-radius: 16px; color: #fff;
}
.amount-fuel-name { font-size: 28px; font-weight: 800; }
.amount-fuel-price { font-size: 20px; opacity: .9; }
.amount-trk-badge {
    font-size: 24px; font-weight: 700; color: #555;
    background: #f5f5f5; padding: 14px 24px; border-radius: 16px;
}
.amount-mode-row {
    display: flex; gap: 0; border-radius: 18px; overflow: hidden;
    border: 2px solid #ddd; margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto;
}
.amount-mode-btn {
    flex: 1; padding: 18px; border: none; font-size: 22px; font-weight: 700;
    cursor: pointer; background: #f5f5f5; color: #666; transition: all .15s;
}
.amount-mode-btn.active { background: #43b55c; color: #fff; }
.amount-display-big {
    display: flex; align-items: baseline; justify-content: center; gap: 12px;
    margin-bottom: 8px;
}
.amount-display-val { font-size: 72px; font-weight: 800; color: #1a1a1a; }
.amount-display-unit { font-size: 32px; color: #888; font-weight: 600; }
.amount-secondary { font-size: 22px; color: #888; margin-bottom: 24px; }
.amount-increment-row {
    display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap;
}
.amount-inc-btn {
    padding: 16px 28px; border: 2px solid #43b55c; border-radius: 16px;
    background: #f0faf2; font-size: 24px; font-weight: 800; color: #2e7d32;
    cursor: pointer; transition: all .12s; min-width: 90px;
}
.amount-inc-btn:hover { background: #e0f5e4; transform: translateY(-2px); }
.amount-inc-btn:active { transform: scale(.96); }
.amount-inc-btn.dec {
    border-color: #e53935; background: #fff5f5; color: #c62828;
}
.amount-inc-btn.dec:hover { background: #ffebee; }
.amount-actions-row {
    display: flex; gap: 12px; justify-content: center; margin: 16px 0 8px;
}
.amount-custom-btn {
    padding: 16px 28px; border: 2px solid #ddd; border-radius: 14px;
    background: #fff; font-size: 22px; font-weight: 600; color: #555;
    cursor: pointer; transition: all .12s;
}
.amount-custom-btn:hover { border-color: #43b55c; background: #f0faf2; }
.amount-reset-btn {
    padding: 16px 28px; border: 2px solid #ffcdd2; border-radius: 14px;
    background: #fff; font-size: 22px; font-weight: 600; color: #e53935;
    cursor: pointer; transition: all .12s;
}
.amount-reset-btn:hover { background: #ffebee; }
.amount-bottom-row {
    display: flex; justify-content: center; margin-top: 24px;
}

/* ===== BONUS TABS (E14) ===== */
.bonus-tabs {
    display: flex; gap: 0; border-radius: 18px; overflow: hidden;
    border: 2px solid #ddd; margin-bottom: 28px;
}
.bonus-tab {
    flex: 1; padding: 18px 12px; border: none; font-size: 22px; font-weight: 700;
    cursor: pointer; background: #f5f5f5; color: #666; transition: all .15s;
    text-align: center;
}
.bonus-tab.active { background: #43b55c; color: #fff; }
.bonus-phone-block { text-align: center; }
.bonus-label { font-size: 22px; font-weight: 700; color: #333; display: block; margin-bottom: 16px; }
.bonus-phone-input {
    width: 100%; max-width: 460px; height: 72px; border: 3px solid #ddd; border-radius: 18px;
    padding: 0 24px; font-size: 32px; font-weight: 600; outline: none; text-align: center;
    letter-spacing: 2px;
}
.bonus-phone-input:focus { border-color: #43b55c; }
.bonus-phone-actions { margin-top: 20px; display: flex; justify-content: center; }
.bonus-scan-block { padding: 20px 0; }

/* Phone display & numpad */
.bonus-phone-display {
    font-size: 40px; font-weight: 800; color: #1a1a1a; text-align: center;
    padding: 20px; background: #f8f8f8; border-radius: 18px; margin-bottom: 20px;
    letter-spacing: 3px; border: 2px solid #ddd; min-height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.bonus-numpad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    max-width: 380px; margin: 0 auto;
}
.bonus-numpad-btn {
    height: 68px; border: 1px solid #ddd; border-radius: 14px; background: #fff;
    font-size: 28px; font-weight: 600; cursor: pointer; transition: all .1s;
}
.bonus-numpad-btn:hover { background: #f0f0f0; }
.bonus-numpad-btn:active { background: #ddd; transform: scale(.97); }
.bonus-numpad-btn.clear { font-size: 22px; color: #e74c3c; }

/* ===== HOME TRK — BIGGER WITH ICON LEFT ===== */
.home-trk {
    border-radius: 16px; padding: 12px 16px; cursor: pointer;
    border: 3px solid #e0e0e0; transition: all .15s; background: #fff;
    display: flex; align-items: center; gap: 12px;
    min-height: 72px; box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.home-trk-icon { font-size: 32px; flex-shrink: 0; opacity: .6; }
.home-trk-right { display: flex; flex-direction: column; }
.home-trk-num { font-size: 28px; font-weight: 800; color: #1a1a1a; line-height: 1.1; }
.home-trk-fuel { font-size: 20px; font-weight: 800; }
.home-trk-status { font-size: 18px; font-weight: 600; }
.home-trk-nozzle .home-trk-icon { opacity: 1; }

/* (scan-block-mini removed — integrated into trk-home-header) */

/* ===== E12 PAGE — NO SCROLL ===== */
.e12-page {
    display: flex; flex-direction: column; height: calc(100% - 82px);
    padding: 20px 40px; overflow: hidden; align-items: center;
}
.e12-top {
    display: flex; align-items: center; gap: 20px; width: 100%;
    max-width: 900px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;
}
.e12-display {
    display: flex; align-items: baseline; justify-content: center; gap: 14px;
    margin-bottom: 4px;
}
.e12-mid-row {
    display: flex; gap: 16px; justify-content: center; margin: 12px 0;
}
.e12-toggle-btn, .e12-reset-btn {
    padding: 14px 28px; border: 2px solid #ddd; border-radius: 14px;
    background: #fff; font-size: 22px; font-weight: 600; cursor: pointer;
    transition: all .12s; color: #555;
}
.e12-toggle-btn:hover { border-color: #43b55c; background: #f0faf2; }
.e12-reset-btn { border-color: #ffcdd2; color: #e53935; }
.e12-reset-btn:hover { background: #ffebee; }
.e12-bottom {
    margin-top: auto; padding-top: 12px; display: flex; justify-content: center; width: 100%;
}

/* ===== AMOUNT SCREEN BIG (E12) ===== */
.amount-header-big {
    display: flex; align-items: center; justify-content: center; gap: 24px;
    margin-bottom: 36px; flex-wrap: wrap;
}
.amount-fuel-badge-big {
    padding: 18px 36px; border-radius: 20px; color: #fff;
}
.amount-fuel-name-big { font-size: 40px; font-weight: 800; }
.amount-fuel-meta { text-align: left; }
.amount-fuel-price-big { font-size: 28px; font-weight: 700; color: #333; }
.amount-trk-badge-big { font-size: 24px; font-weight: 600; color: #888; margin-top: 4px; }

.amount-mode-row-big {
    display: flex; gap: 0; border-radius: 20px; overflow: hidden;
    border: 3px solid #ddd; margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto;
}
.amount-mode-btn-big {
    flex: 1; padding: 22px; border: none; font-size: 26px; font-weight: 700;
    cursor: pointer; background: #f5f5f5; color: #666; transition: all .15s;
}
.amount-mode-btn-big.active { background: #43b55c; color: #fff; }

.amount-display-huge { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin-bottom: 8px; }
.amount-val-huge { font-size: 96px; font-weight: 800; color: #1a1a1a; }
.amount-unit-huge { font-size: 40px; color: #888; font-weight: 600; }
.amount-secondary-big { font-size: 26px; color: #888; margin-bottom: 32px; text-align: center; min-height: 36px; }

.amount-increment-row-big {
    display: flex; gap: 16px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap;
}
.amount-inc-btn-big {
    padding: 20px 36px; border: 3px solid #43b55c; border-radius: 18px;
    background: #f0faf2; font-size: 30px; font-weight: 800; color: #2e7d32;
    cursor: pointer; transition: all .12s; min-width: 110px;
}
.amount-inc-btn-big:hover { background: #e0f5e4; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(67,181,92,.2); }
.amount-inc-btn-big:active { transform: scale(.96); }
.amount-inc-btn-big.dec { border-color: #e53935; background: #fff5f5; color: #c62828; }
.amount-inc-btn-big.dec:hover { background: #ffebee; }

.numpad-big {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    width: 100%; max-width: 640px; margin: 4px auto 0;
}
.numpad-btn-big {
    height: 86px; border: 2px solid #d0d0d0; border-radius: 20px; background: #fff;
    font-size: 40px; font-weight: 700; cursor: pointer; transition: all .1s;
    box-shadow: 0 3px 8px rgba(0,0,0,.06);
}
.numpad-btn-big:hover { background: #f0faf2; border-color: #43b55c; box-shadow: 0 4px 12px rgba(67,181,92,.15); }
.numpad-btn-big:active { background: #e0e0e0; transform: scale(.96); box-shadow: none; }
.numpad-btn-big.clear { font-size: 26px; color: #e74c3c; font-weight: 800; }
.numpad-btn-big.backspace { font-size: 32px; }

/* ===== PAYMENT BIG CARDS (E15) ===== */
.payment-grid-big { display: grid; gap: 20px; }
.horizontal .payment-grid-big { grid-template-columns: repeat(3, 1fr); }
.vertical .payment-grid-big { grid-template-columns: 1fr; }

.payment-card-big {
    background: #fff; border-radius: 24px; padding: 40px 28px; cursor: pointer;
    border: 3px solid #e8e8e8; transition: all .15s; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 220px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.payment-card-big:hover { border-color: #43b55c; box-shadow: 0 8px 28px rgba(67,181,92,.15); transform: translateY(-4px); }
.payment-card-big:active { transform: scale(.97); }
.payment-icon-big { font-size: 64px; margin-bottom: 16px; }
.payment-name-big { font-size: 28px; font-weight: 800; color: #1a1a1a; }

/* ===== E15 PAGE — NO SCROLL ===== */
.e15-page {
    display: flex; flex-direction: column; height: calc(100% - 82px);
    padding: 12px 28px; overflow: hidden;
}
.e15-top {
    display: flex; align-items: baseline; gap: 24px; margin-bottom: 10px;
}
.e15-title { font-size: 38px; font-weight: 800; color: #1a1a1a; }
.e15-total { font-size: 30px; color: #555; }
.e15-total b { color: #43b55c; font-size: 36px; }

.e15-main {
    flex: 1; display: grid; gap: 20px; min-height: 0;
}
.horizontal .e15-main { grid-template-columns: 1fr 1fr; }
.vertical .e15-main { grid-template-columns: 1fr; }

.e15-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.e15-pay-grid { display: flex; flex-direction: column; gap: 8px; }
.e15-pay-card {
    background: #fff; border-radius: 20px; padding: 14px 24px; cursor: pointer;
    border: 3px solid #e8e8e8; transition: all .15s; text-align: left;
    display: flex; flex-direction: row; align-items: center; gap: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.e15-pay-card:hover { border-color: #43b55c; box-shadow: 0 8px 24px rgba(67,181,92,.15); transform: translateY(-3px); }
.e15-pay-card:active { transform: scale(.97); }
.e15-pay-icon { font-size: 44px; flex-shrink: 0; }
.e15-pay-info { display: flex; flex-direction: column; }
.e15-pay-name { font-size: 26px; font-weight: 800; color: #1a1a1a; }
.e15-pay-desc { font-size: 20px; color: #888; margin-top: 2px; }

.e15-receipt { flex: 1; min-height: 0; overflow: hidden; }

.e15-right {
    display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.e15-drinks-title { font-size: 26px; font-weight: 800; color: #1a1a1a; flex-shrink: 0; }
.e15-drinks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; flex: 1; min-height: 0; }
.e15-drink {
    background: #fff; border-radius: 14px; padding: 8px; cursor: pointer;
    border: 2px solid transparent; transition: all .15s; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.e15-drink:hover { border-color: #43b55c; }
.e15-drink:active { transform: scale(.97); }
.e15-drink-img {
    width: 100%; flex: 1; object-fit: contain; border-radius: 10px;
    background: #fafafa; min-height: 0;
}
.e15-drink-name { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-top: 4px; line-height: 1.1; flex-shrink: 0; }
.e15-drink-price { font-size: 20px; color: #43b55c; font-weight: 700; margin-top: 2px; flex-shrink: 0; }

.e15-bottom {
    display: flex; gap: 16px; padding-top: 10px; flex-shrink: 0;
}
.e15-action-btn {
    flex: 1; padding: 16px; border: 3px solid #e0e0e0; border-radius: 18px;
    background: #fff; font-size: 26px; font-weight: 700; cursor: pointer;
    transition: all .15s; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.e15-action-btn:hover { border-color: #43b55c; background: #f0faf2; transform: translateY(-2px); }
.e15-action-btn:active { transform: scale(.98); }

/* Receipt block */
.receipt-block {
    background: #fff; border-radius: 18px; padding: 24px 28px; margin-top: 28px;
    border: 1px solid #eee; box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.receipt-title { font-size: 26px; font-weight: 700; color: #888; margin-bottom: 14px; }
.receipt-line {
    display: flex; justify-content: space-between; padding: 10px 0; font-size: 22px;
    font-size: 22px; color: #333; border-bottom: 1px solid #f0f0f0;
}
.receipt-line-name { font-weight: 500; }
.receipt-line-price { font-weight: 700; }
.receipt-total-line {
    display: flex; justify-content: space-between; padding: 14px 0 0;
    font-size: 28px; font-weight: 800; color: #43b55c;
}
.receipt-line-editable {
    cursor: pointer; position: relative; padding-right: 40px;
    transition: background .15s;
}
.receipt-line-editable:hover { background: #f0faf2; border-radius: 8px; }
.receipt-edit-icon {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 20px; opacity: 0.6;
}
.receipt-line-editable:hover .receipt-edit-icon { opacity: 1; }

.receipt-line-cart { align-items: center; gap: 8px; }
.receipt-cart-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.receipt-qty-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 2px solid #ddd;
    background: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; padding: 0;
}
.receipt-qty-btn:hover { border-color: #43b55c; background: #f0faf2; }
.receipt-qty-btn.remove { border-color: #e53935; color: #e53935; font-size: 18px; }
.receipt-qty-btn.remove:hover { background: #fce4ec; }
.receipt-qty-num { font-size: 22px; font-weight: 700; min-width: 24px; text-align: center; }

/* ===== E18B EDIT FUEL ===== */
.e18b-page {
    display: flex; flex-direction: column; height: calc(100% - 82px);
    padding: 16px 28px; overflow: hidden;
}
.e18b-title { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.e18b-subtitle { font-size: 22px; color: #888; margin-bottom: 12px; }
.e18b-content {
    flex: 1; display: grid; gap: 24px; min-height: 0; overflow: hidden;
}
.horizontal .e18b-content { grid-template-columns: 1fr 1fr; }
.vertical .e18b-content { grid-template-columns: 1fr; }
.e18b-section { display: flex; flex-direction: column; min-height: 0; }
.e18b-section-title { font-size: 26px; font-weight: 700; color: #555; margin-bottom: 10px; flex-shrink: 0; }
.e18b-trk-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    flex: 1; min-height: 0; align-content: start;
}
.vertical .e18b-trk-grid { grid-template-columns: repeat(5, 1fr); }
.e18b-trk-tile {
    background: #fff; border-radius: 14px; padding: 12px; text-align: center;
    border: 3px solid #e0e0e0; cursor: pointer; transition: all .15s;
}
.e18b-trk-tile:hover { border-color: #43b55c; transform: translateY(-2px); }
.e18b-trk-selected { border-color: #43b55c !important; background: #e8f5e9 !important; box-shadow: 0 4px 16px rgba(67,181,92,.25); }
.e18b-trk-disabled { opacity: 0.4; cursor: not-allowed; }
.e18b-trk-disabled:hover { border-color: #e0e0e0; transform: none; }
.e18b-trk-num { font-size: 32px; font-weight: 800; color: #1a1a1a; }
.e18b-trk-status { font-size: 20px; color: #888; margin-top: 4px; }
.e18b-fuel-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    flex: 1; min-height: 0; align-content: start;
}
.vertical .e18b-fuel-grid { grid-template-columns: repeat(3, 1fr); }
.e18b-fuel-card {
    background: #fff; border-radius: 14px; padding: 16px; text-align: center;
    border: 3px solid #e0e0e0; cursor: pointer; transition: all .15s;
}
.e18b-fuel-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.e18b-fuel-selected { box-shadow: 0 4px 16px rgba(67,181,92,.25); }
.e18b-fuel-nozzle { font-size: 20px; font-weight: 600; color: #888; }
.e18b-fuel-name { font-size: 28px; font-weight: 800; }
.e18b-fuel-price { font-size: 22px; color: #888; margin-top: 4px; }
.e18b-bottom {
    flex-shrink: 0; padding-top: 16px; display: flex; justify-content: center;
}

/* ===== E25 CART + CATALOG ===== */
.e25-page {
    display: flex; flex-direction: column; height: calc(100% - 82px);
    padding: 12px 28px; overflow: hidden;
}
.e25-header {
    display: flex; align-items: baseline; gap: 24px; margin-bottom: 10px; flex-shrink: 0;
}
.e25-title { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.e25-total { font-size: 28px; color: #555; }
.e25-total b { color: #43b55c; font-size: 32px; }
.e25-main {
    flex: 1; display: grid; gap: 20px; min-height: 0; overflow: hidden;
}
.horizontal .e25-main { grid-template-columns: 1fr 1fr; }
.vertical .e25-main { grid-template-columns: 1fr; }
.e25-cart {
    display: flex; flex-direction: column; min-height: 0;
    background: #fff; border-radius: 18px; padding: 16px 20px;
    border: 1px solid #eee; box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.e25-cart-title { font-size: 26px; font-weight: 700; color: #888; margin-bottom: 10px; flex-shrink: 0; }
.e25-cart-items { flex: 1; min-height: 0; overflow-y: auto; }
.e25-cart-line {
    display: flex; align-items: center; gap: 10px; padding: 10px 0;
    font-size: 22px; color: #333; border-bottom: 1px solid #f0f0f0;
}
.e25-cart-fuel { cursor: pointer; transition: background .15s; border-radius: 8px; padding: 10px 6px; }
.e25-cart-fuel:hover { background: #f0faf2; }
.e25-cart-icon { font-size: 24px; flex-shrink: 0; }
.e25-cart-name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e25-cart-detail { font-size: 20px; color: #888; flex-shrink: 0; }
.e25-cart-price { font-weight: 700; color: #1a1a1a; flex-shrink: 0; min-width: 80px; text-align: right; }
.e25-cart-edit { font-size: 20px; opacity: 0.5; flex-shrink: 0; }
.e25-cart-fuel:hover .e25-cart-edit { opacity: 1; }
.e25-cart-qty-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.e25-qty-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 2px solid #ddd;
    background: #fff; font-size: 22px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.e25-qty-btn:hover { border-color: #43b55c; background: #f0faf2; }
.e25-qty-btn.remove { border-color: #e53935; color: #e53935; }
.e25-qty-btn.remove:hover { background: #fce4ec; }
.e25-qty-num { font-size: 22px; font-weight: 700; min-width: 24px; text-align: center; }
.e25-cart-empty { font-size: 22px; color: #bbb; text-align: center; padding: 40px 0; }
.e25-cart-total {
    display: flex; justify-content: space-between; padding: 12px 0 8px;
    font-size: 26px; font-weight: 800; color: #43b55c; flex-shrink: 0;
    border-top: 2px solid #e8e8e8;
}
.e25-pay-btn { width: 100%; font-size: 24px; flex-shrink: 0; margin-top: 8px; }
.e25-catalog {
    display: flex; flex-direction: column; min-height: 0;
}
.e25-catalog-title { font-size: 26px; font-weight: 700; color: #888; margin-bottom: 10px; flex-shrink: 0; }
.e25-catalog-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    flex: 1; min-height: 0; overflow-y: auto; align-content: start;
}
.e25-cat-tile {
    background: #fff; border-radius: 14px; cursor: pointer; overflow: hidden;
    border: 2px solid #eee; transition: all .15s;
    display: flex; flex-direction: column;
}
.e25-cat-tile:hover { border-color: #43b55c; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(67,181,92,.12); }
.e25-cat-img { width: 100%; height: 110px; object-fit: contain; background: #fafafa; }
.e25-cat-name { font-size: 20px; font-weight: 700; color: #1a1a1a; padding: 8px 10px; text-align: center; }