:root{--primary:#f59e0b;--primary-hover:#d97706;--bg-color:#0f172a;--surface-color:#1e293bb3;--surface-border:#ffffff1a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--radius:16px;--radius-sm:8px;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(at 0 0,#f59e0b26 0,#0000 50%),radial-gradient(at 100% 100%,#10b9811a 0,#0000 50%);background-attachment:fixed;min-height:100vh;overflow-x:hidden}.glass{background:var(--surface-color);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:var(--radius);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.glass-panel{-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--surface-border);background:#0f172a99}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}h1,h2,h3,h4,h5,h6{color:var(--text-primary);letter-spacing:-.025em;font-weight:600}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px #f59e0b63}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 20px #f59e0b3b}.btn-glass{color:var(--text-primary);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff1a}.btn-glass:hover{background:#ffffff26}.input-group{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.input-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.input{border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--text-primary);transition:var(--transition);background:#0003;outline:none;padding:.75rem 1rem;font-size:1rem}.input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #f59e0b33}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.w-full{width:100%}.h-full{height:100%}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.font-bold{font-weight:700}.text-secondary{color:var(--text-secondary)}.text-primary-color{color:var(--primary)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.app-layout{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{z-index:10;flex-direction:column;align-items:center;gap:2rem;width:80px;padding:1.5rem 0;display:flex}.sidebar-item{width:48px;height:48px;color:var(--text-secondary);transition:var(--transition);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;display:flex}.sidebar-item:hover{color:var(--text-primary);background:#ffffff1a}.sidebar-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px #f59e0b66}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--surface-border);justify-content:space-between;align-items:center;height:70px;padding:0 2rem;display:flex}.pos-layout{height:calc(100vh - 70px);display:flex;overflow:hidden}.pos-products-area{flex-direction:column;flex:1;padding:1.5rem;display:flex;overflow:hidden}.pos-cart-area{border-left:1px solid var(--surface-border);background:#0f172a66;flex-direction:column;width:380px;display:flex}.pos-cart-items{flex:1;padding:1rem;overflow-y:auto}.pos-cart-footer{border-top:1px solid var(--surface-border);background:#0003;padding:1.5rem}.category-tabs{-ms-overflow-style:none;scrollbar-width:none;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;display:flex;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.category-tab{border:1px solid var(--surface-border);white-space:nowrap;cursor:pointer;transition:var(--transition);color:var(--text-secondary);background:#ffffff0d;border-radius:30px;padding:.75rem 1.5rem;font-weight:500}.category-tab:hover{color:var(--text-primary);background:#ffffff1a}.category-tab.active{background:var(--text-primary);color:var(--bg-color);border-color:var(--text-primary)}.product-card{border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:1px solid var(--surface-border);aspect-ratio:1;background:#ffffff08;position:relative;overflow:hidden}.product-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 10px 25px -5px #0000004d}.product-image{object-fit:cover;width:100%;height:65%}.product-info{flex-direction:column;justify-content:space-between;height:35%;padding:.75rem;display:flex}.product-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.9rem;font-weight:600;display:-webkit-box;overflow:hidden}.product-price{color:var(--primary);font-weight:700}.cart-item{border-radius:var(--radius-sm);transition:var(--transition);background:#ffffff0d;border:1px solid #0000;justify-content:space-between;margin-bottom:.5rem;padding:1rem;display:flex}.cart-item:hover{background:#ffffff14;border-color:#ffffff1a}.qty-control{background:#0000004d;border-radius:20px;align-items:center;padding:.25rem;display:flex}.qty-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.qty-btn:hover{background:var(--primary)}.qty-display{padding:0 .75rem;font-weight:600}
