:root{--primary: #0095c9;--primary-dark: #007aa8;--accent: #fff24b;--accent-dark: #e6d943;--danger: #db3832;--danger-dark: #c42f2a;--success: #10b981;--success-dark: #059669;--warning: #f59e0b;--sidebar: #0c1929;--bg: #f1f5f9;--card: #ffffff;--text: #1e293b;--text-muted: #64748b;--border: #e2e8f0;--radius: 16px;--radius-sm: 10px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}h1{font-size:1.5rem;font-weight:800}h2{font-size:1.25rem;font-weight:700}h3{font-size:1rem;font-weight:700}.app-shell{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.pos-header{background:linear-gradient(135deg,var(--sidebar) 0%,#0d2a40 60%,#003d5c 100%);color:#fff;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;border-bottom:2px solid var(--primary);box-shadow:0 2px 12px #0095c933}.pos-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--danger));border-radius:0}.pos-header h1{font-size:1.1rem}.pos-logo-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:10px;font-weight:900;font-size:.75rem;color:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px #0095c966;letter-spacing:.5px;margin-right:10px}.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:16px;transition:box-shadow .2s}.card:active{box-shadow:0 0 0 3px #0095c926}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;border:none;cursor:pointer;transition:all .15s;width:100%;touch-action:manipulation}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 2px 10px #0095c959}.btn-primary:hover{box-shadow:0 4px 16px #0095c973}.btn-accent{background:var(--accent);color:var(--sidebar);font-weight:800;box-shadow:0 2px 8px #fff24b66}.btn-success{background:linear-gradient(135deg,var(--success),var(--success-dark));color:#fff;box-shadow:0 2px 8px #10b98140}.btn-danger{background:linear-gradient(135deg,var(--danger),var(--danger-dark));color:#fff;box-shadow:0 2px 8px #db38324d}.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}.btn-sm{padding:10px 14px;font-size:.8rem}.btn-lg{padding:18px 24px;font-size:1rem}.input{width:100%;padding:14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);font-size:.9rem;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #0095c91f}.label{display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:#fff;border-top:2px solid var(--border);display:flex;padding:8px 4px;padding-bottom:max(8px,env(safe-area-inset-bottom));z-index:40;box-shadow:0 -4px 16px #0000000f}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:.65rem;font-weight:500;color:var(--text-muted);text-decoration:none;transition:color .15s;border-radius:8px}.bottom-nav a.active{color:var(--primary);font-weight:700}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:100px;font-size:.7rem;font-weight:600}.badge-success{background:#d1fae5;color:#065f46}.badge-warning{background:#fef3c7;color:#92400e}.badge-danger{background:#fecdd3;color:#9f1239}.badge-info{background:#dbeafe;color:#1e40af}.badge-primary{background:#e0f5ff;color:#005a7a}.badge-accent{background:var(--accent);color:var(--sidebar)}.badge-gray{background:#f1f5f9;color:#64748b}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeIn .3s ease-out}@keyframes pulse-ring{0%{box-shadow:0 0 #0095c94d}70%{box-shadow:0 0 0 12px #0095c900}to{box-shadow:0 0 #0095c900}}.pulse{animation:pulse-ring 2s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}.content{flex:1;padding:16px 16px 90px;overflow-y:auto;-webkit-overflow-scrolling:touch}.receipt{background:#fff;border:2px dashed var(--border);border-radius:var(--radius);padding:24px 20px;text-align:center}.receipt-divider{border:none;border-top:1px dashed var(--border);margin:12px 0}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-card{background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border);padding:14px;text-align:center}.stat-value{font-size:1.5rem;font-weight:800;color:var(--primary)}.stat-label{font-size:.7rem;font-weight:500;color:var(--text-muted);margin-top:2px}.list-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:8px;cursor:pointer;transition:all .15s}.list-item:active{background:#f8fafc}.progress-bar{height:6px;background:var(--border);border-radius:100px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:100px;transition:width .4s ease}.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}.empty-state svg{margin:0 auto 16px;opacity:.3}.highlight-accent{background:var(--accent);color:var(--sidebar);padding:2px 8px;border-radius:6px;font-weight:700}.danger-strip{background:linear-gradient(135deg,var(--danger),var(--danger-dark));color:#fff;padding:12px 16px;border-radius:var(--radius-sm);font-weight:600}.rounded-xl{border-radius:10px}