:root{--color-primary: #2563EB;--color-primary-dark: #1D4ED8;--color-primary-light: #3B82F6;--color-primary-soft: #EFF6FF;--color-primary-soft-border: #BFDBFE;--color-success: #059669;--color-success-soft: #ECFDF5;--color-success-soft-border: #A7F3D0;--color-danger: #DC2626;--color-danger-soft: #FEF2F2;--color-danger-soft-border: #FECACA;--color-warning: #D97706;--color-warning-soft: #FFFBEB;--color-warning-soft-border: #FDE68A;--color-info: #0891B2;--color-info-soft: #ECFEFF;--color-info-soft-border: #A5F3FC;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--color-light: var(--gray-100);--color-dark: var(--gray-800);--color-border: var(--gray-200);--color-text: var(--gray-900);--color-text-muted: var(--gray-500);--color-bg: #FFFFFF;--color-surface-alt: var(--gray-50);--safe-area-top: env(safe-area-inset-top, 0);--safe-area-right: env(safe-area-inset-right, 0);--safe-area-bottom: env(safe-area-inset-bottom, 0);--safe-area-left: env(safe-area-inset-left, 0);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 24px;--font-size-3xl: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 999px;--shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);--shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);--shadow-md: 0 4px 10px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);--shadow-lg: 0 16px 32px rgba(15, 23, 42, .14), 0 4px 8px rgba(15, 23, 42, .04);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition-base: .18s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-surface-alt);overflow:hidden;-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;display:flex;flex-direction:column}input,textarea,select{font-size:16px}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:48px;min-width:48px;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-weight:600;font-family:inherit;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-fast);background-color:var(--color-primary);color:#fff;-webkit-user-select:none;user-select:none;text-decoration:none;box-shadow:var(--shadow-xs)}button:hover,.btn:hover{background-color:var(--color-primary-dark)}button:active,.btn:active{transform:scale(.97)}button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background-color:#fff;color:var(--color-text);border:1.5px solid var(--color-border);box-shadow:none}.btn-secondary:hover{background-color:var(--color-surface-alt);border-color:var(--gray-300)}.btn-success{background-color:var(--color-success)}.btn-success:hover{background-color:#047857}.btn-danger{background-color:var(--color-danger)}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:var(--color-warning);color:#fff}.btn-info{background-color:var(--color-info)}.btn-sm{min-height:36px;min-width:36px;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);border-radius:var(--radius-sm)}.btn-lg{min-height:54px;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}.btn-block{width:100%}input,textarea,select{width:100%;padding:11px var(--spacing-md);font-size:var(--font-size-base);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg);color:var(--color-text);transition:border-color var(--transition-base),box-shadow var(--transition-base);font-family:inherit}input::placeholder,textarea::placeholder{color:var(--gray-400)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}input:disabled,textarea:disabled,select:disabled{background-color:var(--color-surface-alt);color:var(--color-text-muted);border-color:var(--color-border)}textarea{resize:vertical;min-height:80px}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.row{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.col{flex:1;min-width:0}@media (orientation: landscape) and (min-width: 768px){body{padding-top:var(--safe-area-top);padding-right:var(--safe-area-right);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left)}.landscape-row{display:flex;gap:var(--spacing-md);height:100vh}.landscape-col{flex:1;overflow-y:auto;overflow-x:hidden}}@media (orientation: landscape){--spacing-md: 12px;--spacing-lg: 16px;--font-size-base: 13px;--font-size-lg: 14px}.product-grid{display:grid;grid-auto-rows:min-content;align-content:start;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}@media (min-width: 768px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-sm)}.card-header{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-sm)}h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.01em;line-height:1.3;-webkit-user-select:text;user-select:text}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}p{line-height:1.5;-webkit-user-select:text;user-select:text}.nav{display:flex;gap:var(--spacing-md);background-color:var(--color-primary);padding:var(--spacing-md);color:#fff}.nav-link{flex:1;text-align:center;padding:var(--spacing-md);text-decoration:none;color:#fff;font-weight:600;border-radius:var(--radius-md);transition:background-color var(--transition-base);cursor:pointer}.nav-link:active,.nav-link.active{background-color:var(--color-primary-dark)}table{width:100%;border-collapse:collapse;-webkit-user-select:text;user-select:text}th{background-color:var(--color-surface-alt);padding:12px var(--spacing-md);text-align:left;font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--color-border)}td{padding:var(--spacing-md);border-bottom:1px solid var(--color-border);font-size:var(--font-size-base)}tr:last-child td{border-bottom:none}tbody tr{transition:background-color var(--transition-fast)}tbody tr:hover{background-color:var(--color-surface-alt)}.alert{display:flex;align-items:center;gap:var(--spacing-sm);padding:12px var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);font-weight:500;-webkit-user-select:text;user-select:text;border:1px solid transparent}.alert-success{background-color:var(--color-success-soft);color:#065f46;border-color:var(--color-success-soft-border)}.alert-danger{background-color:var(--color-danger-soft);color:#991b1b;border-color:var(--color-danger-soft-border)}.alert-warning{background-color:var(--color-warning-soft);color:#92400e;border-color:var(--color-warning-soft-border)}.alert-info{background-color:var(--color-info-soft);color:#155e75;border-color:var(--color-info-soft-border)}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-primary{color:var(--color-primary)}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.flex{display:flex;gap:var(--spacing-md)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-col{flex-direction:column}.w-100{width:100%}.h-100{height:100%}.currency{font-weight:600;font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text}.loading{opacity:.6;pointer-events:none}.loader{display:inline-block;width:20px;height:20px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@media print{body{background:#fff}.no-print{display:none}.card{box-shadow:none;border:1px solid #000}}@media print and (width: 58mm){body{width:58mm;font-size:10px}.print-58mm{display:block}.print-80mm{display:none}}@media print and (width: 80mm){body{width:80mm;font-size:12px}.print-58mm{display:none}.print-80mm{display:block}}@media (orientation: landscape) and (min-width: 768px){:root{--font-size-base: 13px;--spacing-md: 12px}.billing-container{grid-template-columns:1fr 380px;height:100%}.products-section{overflow-y:auto;height:100%}.product-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.cart-section{max-height:100%}.navbar{padding:12px}}@media (max-width: 767px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}.navbar-brand h2{font-size:14px}.nav-link{font-size:12px;padding:8px 12px}}@media (hover: none) and (pointer: coarse){button,.btn{min-height:48px;min-width:48px}input,textarea,select{min-height:44px}}@supports (padding: max(0px)){body{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top))}.navbar{padding-left:max(var(--spacing-md),env(safe-area-inset-left));padding-right:max(var(--spacing-md),env(safe-area-inset-right))}}.print-receipt-container{display:none}@media print{body *{visibility:hidden}.print-receipt-container,.print-receipt-container *{visibility:visible}.print-receipt-container{display:block;position:absolute;top:0;left:0;width:100%}.print-receipt-container .bill{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;max-width:400px;margin:0 auto;color:#000}.print-receipt-container .header{text-align:center;margin-bottom:15px;border-bottom:1px solid #000;padding-bottom:10px}.print-receipt-container .shop-name{font-weight:700;font-size:16px}.print-receipt-container .shop-details{font-size:12px}.print-receipt-container .bill-info{font-size:11px;margin:10px 0}.print-receipt-container .items{margin:10px 0;border-top:1px dashed #000;border-bottom:1px dashed #000;padding:6px 0}.print-receipt-container .item{font-size:11px;margin:5px 0}.print-receipt-container .item-row1{display:flex;justify-content:space-between;font-weight:700}.print-receipt-container .item-row2{display:flex;justify-content:space-between;color:#333;font-size:10px}.print-receipt-container .rate-table{width:100%;border-collapse:collapse;font-size:10px;margin:6px 0}.print-receipt-container .rate-table th,.print-receipt-container .rate-table td{text-align:right;padding:2px 4px}.print-receipt-container .rate-table th:first-child,.print-receipt-container .rate-table td:first-child{text-align:left}.print-receipt-container .rate-table th{border-bottom:1px solid #000}.print-receipt-container .summary{border-top:1px solid #000;margin-top:10px;padding-top:10px;font-size:12px}.print-receipt-container .summary-row{display:flex;justify-content:space-between;margin:3px 0}.print-receipt-container .total-row{font-weight:700;font-size:14px;margin-top:5px;border-top:1px dashed #000;padding-top:5px}.print-receipt-container .footer{text-align:center;font-size:10px;margin-top:15px;border-top:1px solid #000;padding-top:10px}}