:root{--bg:#f8fafc;--surface:#ffffff;--surface2:#f1f5f9;--border:#e2e8f0;--text:#0f172a;--text2:#475569;--text3:#64748b;--teal:#0d9488;--teal-light:#14b8a6;--teal-dark:#0f766e;--blue:#3b82f6;--purple:#8b5cf6;--red:#ef4444;--orange:#f97316;--green:#10b981;--yellow:#eab308;--radius:12px;--radius-sm:8px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}
.app{display:flex;height:100vh}
.sidebar{width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 12px;flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:24px}
.logo-icon{font-size:28px}
.logo-text-wrap{display:flex;flex-direction:column;gap:0}
.logo-text{font-size:16px;font-weight:800;background:linear-gradient(135deg,#0d9488,#0f766e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}
.logo-sub{font-size:8px;color:var(--text3);letter-spacing:.3px;line-height:1}
.nav-items{flex:1;display:flex;flex-direction:column;gap:4px}
.nav-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:none;background:none;color:var(--text2);font-size:13px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:.2s;width:100%;text-align:left}
.nav-btn:hover{background:var(--surface2);color:var(--text)}
.nav-btn.active{background:linear-gradient(135deg,var(--teal-dark),var(--teal));color:#fff;font-weight:600}
.nav-icon{font-size:18px;width:24px;text-align:center}
.nav-footer{padding:12px;border-top:1px solid var(--border)}
.user-badge{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.main{flex:1;overflow-y:auto;padding:24px}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text3)}
.spinner{width:32px;height:32px;border:3px solid var(--surface2);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-title{font-size:22px;font-weight:800}
.page-subtitle{font-size:12px;color:var(--text3)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.kpi-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.kpi-value{font-size:24px;font-weight:800;margin:4px 0}
.kpi-sub{font-size:11px;color:var(--text3)}
.kpi.highlight{background:linear-gradient(135deg,var(--teal-dark),var(--teal));border:none}
.kpi.highlight .kpi-label,.kpi.highlight .kpi-sub{color:rgba(255,255,255,.7)}
.kpi.highlight .kpi-value{color:#fff}
.btn{padding:8px 16px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover{background:var(--teal-light)}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{opacity:.9}
.btn-sm{padding:6px 12px;font-size:11px}
.btn-lg{padding:12px 24px;font-size:15px}
input,select,textarea{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-family:'Inter',sans-serif;width:100%;transition:.2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.15)}
.input-group{margin-bottom:14px}
.input-label{display:block;font-size:11px;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:600;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
td{padding:10px 12px;font-size:13px;border-bottom:1px solid rgba(71,85,105,.3)}
tr:hover{background:rgba(13,148,136,.02)}
th.right,td.right{text-align:right}
.badge{padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;display:inline-block}
.badge-green{background:rgba(34,197,94,.15);color:var(--green)}
.badge-red{background:rgba(239,68,68,.15);color:var(--red)}
.badge-orange{background:rgba(249,115,22,.15);color:var(--orange)}
.badge-teal{background:rgba(13,148,136,.15);color:var(--teal-light)}
.badge-blue{background:rgba(59,130,246,.15);color:var(--blue)}
.pos-layout{display:grid;grid-template-columns:1fr 340px;gap:16px;height:calc(100vh - 68px)}
.pos-products{overflow-y:auto}
.pos-cart{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05)}
.pos-cart-header{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.close-cart-btn{display:none}
.floating-cart-btn{display:none}
.pos-cart-items{flex:1;overflow-y:auto;padding:12px}
.cart-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:8px;background:var(--surface2);border:1px solid var(--border);transition:all .2s;position:relative}
.cart-item:hover{background:var(--surface);border-color:var(--teal-light);transform:translateX(2px);box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.cart-item-info{flex:1}
.cart-item-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.2}
.cart-item-price{font-size:11px;color:var(--teal-light);font-weight:500}
.cart-item-qty{display:flex;align-items:center;gap:8px;background:var(--surface);padding:4px;border-radius:6px;border:1px solid var(--border)}
.cart-item-qty button{width:26px;height:26px;border:none;border-radius:4px;background:var(--surface);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.cart-item-qty button:hover{background:var(--teal);color:#fff}
.cart-item-qty span{font-size:13px;font-weight:700;min-width:20px;text-align:center}
.cart-item-total{font-weight:800;font-size:15px;color:var(--text);min-width:76px;text-align:right}
.cart-item-remove{color:var(--text3);cursor:pointer;font-size:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s;margin-left:4px}
.cart-item-remove:hover{background:rgba(239,68,68,0.1);color:var(--red)}
.pos-cart-footer{border-top:1px solid var(--border);padding:16px}
.cart-total-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--text2)}
.cart-total-row.grand{font-size:20px;font-weight:800;color:var(--text);padding:8px 0;border-top:1px solid var(--border);margin-top:4px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:12px;padding-bottom:20px}
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,0.04);min-height:220px}
.product-card-img-wrap{width:100%;height:140px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.product-card-img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform 0.4s ease}
.product-card:hover .product-card-img{transform:scale(1.08)}
.product-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at top right, rgba(20,184,166,0.1), transparent 60%);opacity:0;transition:opacity 0.3s;pointer-events:none}
.product-card:hover{transform:translateY(-4px);border-color:rgba(20,184,166,0.3);box-shadow:0 12px 20px rgba(0,0,0,0.08), 0 0 15px rgba(13,148,136,0.1)}
.product-card:hover::before{opacity:1}
.product-card-content{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:14px}
.product-card-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.product-card-cat{font-size:11px;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:4px}
.product-card-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding-top:12px;border-top:1px dashed var(--border)}
.product-card-price-wrap{display:flex;flex-direction:column}
.product-card-price{font-size:18px;font-weight:800;color:var(--teal-light);letter-spacing:-0.5px}
.product-card-rent{font-size:11px;color:var(--text2);margin-top:2px}
.product-card-stock{font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;background:var(--surface2);color:var(--text2)}
.product-card-stock.low{color:var(--orange);background:rgba(249,115,22,0.1)}
.product-card-stock.out{color:var(--red);background:rgba(239,68,68,0.1)}
.type-badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:800;padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;z-index:3;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.cat-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.search-bar{position:relative;margin-bottom:12px}
.search-bar input{padding-left:36px}
.search-bar::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;padding:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.15)}
.modal-title{font-size:18px;font-weight:800;margin-bottom:16px}
.tab-bar{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.tab-btn{padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:.2s}
.tab-btn:hover{background:var(--surface2)}
.tab-btn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state .icon{font-size:48px;margin-bottom:12px}
.empty-state .title{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text2)}
.rental-status{display:inline-flex;align-items:center;gap:4px}
@media(max-width:768px){
  .app{flex-direction:column}
  .sidebar{flex-direction:row;width:100%;height:auto;padding:8px;border-right:none;border-top:1px solid var(--border);order:2;align-items:center;justify-content:space-between;background:var(--surface);z-index:999;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}
  .logo,.nav-footer,.nav-label{display:none}
  .nav-items{flex-direction:row;gap:4px;width:100%;justify-content:space-around}
  .nav-btn{flex-direction:column;gap:4px;padding:8px 4px;border-radius:12px;width:100%;font-size:10px;justify-content:center;text-align:center}
  .nav-icon{font-size:20px;margin-bottom:2px}
  .main{order:1;padding:12px;height:calc(100vh - 70px)}
  .page-title{font-size:20px}
  .pos-layout{grid-template-columns:1fr;height:calc(100vh - 120px);gap:12px}
  .pos-products{padding-bottom:140px}
  .pos-cart.closed{display:none !important}
  .pos-cart.open{position:fixed;bottom:70px;left:0;right:0;max-height:75vh;z-index:100;border-radius:24px 24px 0 0;border:1px solid var(--border);border-bottom:none;box-shadow:0 -10px 40px rgba(0,0,0,0.15);margin:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px)}
  .floating-cart-btn{display:flex;justify-content:space-between;align-items:center;position:fixed;bottom:80px;left:16px;right:16px;background:linear-gradient(135deg, var(--teal-dark), var(--teal-light));color:#fff;padding:16px 20px;border-radius:100px;box-shadow:0 8px 25px rgba(13,148,136,0.6);z-index:101;font-weight:700;font-size:14px;animation:slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
  @keyframes slideUp{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}
  .close-cart-btn{display:flex;align-items:center;justify-content:center;background:var(--surface2);padding:4px 12px;border-radius:12px;font-size:12px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .product-card-img-wrap{height:100px}
  .product-card{min-height:180px;padding:12px}
  .product-card-name{font-size:12px}
  .product-card-price{font-size:15px}
  .modal{width:100%;height:100%;max-height:100vh;border-radius:0;padding:20px;display:flex;flex-direction:column}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
}

.logo-img{max-width:170px;height:auto;object-fit:contain}

@keyframes logoEntrance {
  0% { transform: translateY(20px); opacity: 0; filter: blur(4px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.anim-logo {
  animation: logoEntrance 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}