:root { --glass: rgba(255,255,255,.68); --glass-strong: rgba(255,255,255,.84); --glass-border: rgba(255,255,255,.76); --glass-shadow: 0 16px 42px rgba(30,68,49,.10); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-item svg, .kpi-icon svg, .payment-methods svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item i { display: grid; place-items: center; }
.kpi-icon svg { width: 16px; height: 16px; }
.payment-methods button b { display: grid; place-items: center; }
.payment-methods svg { width: 22px; height: 22px; }

body { min-height: 100vh; background: radial-gradient(circle at 16% 8%, rgba(216,244,95,.23), transparent 30%), radial-gradient(circle at 82% 12%, rgba(117,205,165,.25), transparent 31%), radial-gradient(circle at 70% 82%, rgba(255,174,118,.19), transparent 34%), #edf3ee; background-attachment: fixed; }
.app-shell { background: transparent; }
.sidebar { background: linear-gradient(165deg, rgba(10,61,41,.92), rgba(18,75,51,.82)); border-right: 1px solid rgba(255,255,255,.16); box-shadow: 12px 0 38px rgba(16,62,42,.12); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.nav-item.active, .nav-item:hover { background: rgba(255,255,255,.13); box-shadow: inset 0 1px rgba(255,255,255,.10); }
.profile { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); }
.auth-screen { background: radial-gradient(circle at 18% 20%, rgba(216,244,95,.3), transparent 31%), radial-gradient(circle at 85% 12%, rgba(91,185,139,.3), transparent 33%), #edf3ee; }
.login-card, .cart-panel, .product-card, .kpi-card, .chart-card, .table-card, .manage-card, .inventory-card, .inventory-kpi { background: var(--glass); border-color: var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
.login-card, .cart-panel, .chart-card, .table-card, .inventory-card { box-shadow: 0 18px 48px rgba(30,68,49,.11), inset 0 1px rgba(255,255,255,.72); }
.search, .outline-btn, .select-button, .filter-button, .branch-select, .category, .inventory-filter { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.category.active, .pay-button { background: linear-gradient(135deg, rgba(16,105,69,.96), rgba(22,126,82,.94)); box-shadow: 0 9px 22px rgba(23,107,71,.18); }
.report-note { background: rgba(231,247,237,.63); border-color: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.period-tabs, .metric-tabs { background: rgba(226,236,228,.65); border: 1px solid rgba(255,255,255,.65); }
.period-tabs button.active, .metric-tabs button.active { background: rgba(255,255,255,.88); box-shadow: 0 3px 10px rgba(36,75,53,.10); }
.fruit-visual { box-shadow: inset 0 1px rgba(255,255,255,.75); }
.payment-modal, .small-modal, .inventory-modal { background: rgba(250,253,251,.84); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 26px 90px rgba(14,49,32,.28), inset 0 1px rgba(255,255,255,.85); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); }
.payment-modal::backdrop, .small-modal::backdrop, .inventory-modal::backdrop { background: rgba(15,49,33,.38); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.modal-close { background: rgba(235,242,237,.72); border: 1px solid rgba(255,255,255,.8); }
.cash-input, .modal-input > input, .inventory-current, .stock-modes button { background: rgba(255,255,255,.56); border-color: rgba(185,207,193,.65); }

.dashboard-grid { grid-template-columns: minmax(0,1.5fr) minmax(270px,.8fr); }
.sales-chart { grid-column: 1; }
.top-products { grid-column: 2; }
.product-sales-chart { grid-column: 1 / -1; }
.heat-card { grid-column: 1; }
.payment-card { grid-column: 2; }
.product-chart-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.detailed-heatmap { grid-template-columns: 38px repeat(7,minmax(18px,1fr)); gap: 5px; margin-top: 20px; }
.detailed-heatmap .heat-cell { min-width: 0; min-height: 17px; aspect-ratio: auto; }
.heatmap-scale { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.heatmap-scale i { width: 13px; height: 9px; border-radius: 3px; background: #eef3ef; }
.heatmap-scale i[data-level="1"] { background: #d5eee0; }
.heatmap-scale i[data-level="2"] { background: #9ed7b5; }
.heatmap-scale i[data-level="3"] { background: #55ad78; }
.heatmap-scale i[data-level="4"] { background: #176b47; }

@media (max-width: 820px) {
  .sidebar { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: rgba(10,61,41,.90); }
  .dashboard-grid { grid-template-columns: minmax(0,1fr); }
  .sales-chart, .top-products, .product-sales-chart, .heat-card, .payment-card { grid-column: 1; }
}
@media (max-width: 600px) {
  .product-chart-header { align-items: stretch; flex-direction: column; }
  .product-chart-controls { justify-content: flex-start; }
  .range-tabs { overflow-x: auto; }
  .detailed-heatmap { grid-template-columns: 32px repeat(7,minmax(17px,1fr)); gap: 4px; }
}
@media (prefers-reduced-transparency: reduce) {
  .login-card, .cart-panel, .product-card, .kpi-card, .chart-card, .table-card, .manage-card, .inventory-card, .inventory-kpi { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}