*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#020a17;color:#f5f7ff}body{background:radial-gradient(circle at 55% 20%,#0b2446 0,#031021 38%,#010711 80%);overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
:root{--bg:#020a17;--panel:#06162b;--panel2:#081d37;--line:#1d5b9d;--cyan:#00f4ff;--blue:#148bff;--pink:#ff19dd;--gold:#ffd45a;--green:#00f0b0;--red:#ff4668;--text:#eef4ff;--muted:#91a6c4}
.login-page{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}.login-glow{position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,#0b5cff30,transparent 65%);filter:blur(8px)}.login-card{position:relative;width:420px;padding:38px;border:1px solid #2386dc;border-radius:28px;background:linear-gradient(150deg,#061b34ee,#020914f5);box-shadow:0 0 60px #0077ff30,0 0 110px #7b00ff15}.brand-mark{margin:auto;width:74px;height:74px;border-radius:24px;display:grid;place-items:center;font-size:45px;color:#ffd55c;background:#122b4d;border:1px solid #f5bd36;box-shadow:0 0 35px #ffd00045}.login-card h1{text-align:center;margin:18px 0 0;color:#fff}.login-card>.gold{text-align:center;color:#00efff;letter-spacing:4px}.login-line{height:1px;background:linear-gradient(90deg,transparent,#ffc72c,transparent);margin:24px 0}.login-card label{display:block;margin:13px 0 7px;color:#b6c8e2}.login-card input,.setting-card input,.modal-card input,.table-tools input,.table-tools select,.customer-box input{width:100%;background:#061a33;border:1px solid #2b5f98;border-radius:10px;color:white;padding:13px;outline:none}.login-card input:focus,.modal-card input:focus,.setting-card input:focus{border-color:var(--cyan);box-shadow:0 0 14px #00eaff22}.primary-btn{width:100%;border:1px solid #00d9ff;border-radius:11px;padding:13px;color:#fff;background:linear-gradient(90deg,#00a9ff,#791cff);box-shadow:0 0 22px #6d00ff38;font-weight:700;margin-top:18px}.compact{width:auto;margin:0}.error{color:#ff6984;min-height:20px;margin-top:10px;text-align:center}.login-card small{display:block;text-align:center;color:#7f94b1;margin-top:17px}.login-card small b{color:#ffd45a}

.app{min-height:100vh}.topbar{height:94px;position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:25px;padding:12px 22px;background:linear-gradient(90deg,#020b1cfa,#04162afa);border-bottom:1px solid #1a4b7d;box-shadow:0 5px 35px #0008}.brand{width:280px;display:flex;align-items:center;gap:13px}.crown{font-size:43px;color:#ffd458;text-shadow:0 0 25px #ffc400}.brand h2{margin:0;color:#ffe47a;font-size:21px;letter-spacing:1px}.brand span{color:#00ecff;font-size:13px;letter-spacing:3px}.brand em{display:block;color:#e7ad36;font-family:cursive;font-size:13px}.search-wrap{height:60px;flex:1;max-width:690px;display:flex;align-items:center;border:1px solid #3676b6;border-radius:17px;background:#071a34;box-shadow:inset 0 0 25px #00152c}.search-wrap span{font-size:36px;margin:0 14px;color:#e8f5ff;transform:rotate(-20deg)}.search-wrap input{flex:1;background:none;border:0;outline:0;color:#fff;font-size:16px}.search-wrap button{height:42px;width:55px;margin-right:7px;border:0;background:none;color:#fff;font-size:27px}.top-info{margin-left:auto;display:flex;align-items:center;gap:12px}.clock{min-width:120px;padding:5px 10px}.clock b{display:block;font-size:18px}.clock small{color:#8ea4c2}.icon-btn{position:relative;background:#0a1830;border:1px solid #284b79;color:#fff;border-radius:14px;width:54px;height:54px}.icon-btn i{position:absolute;right:2px;top:0;background:#ff315c;border-radius:50%;font-size:11px;padding:3px 6px}.user-box{display:flex;gap:10px;align-items:center;padding:10px 16px;border:1px solid #1373bd;border-radius:14px;min-width:210px;background:#071a31}.user-box small{display:block;color:#00f0b0}.online-dot{display:inline-block;width:8px;height:8px;background:#00eab1;border-radius:50%;margin-right:4px}.sidebar{position:fixed;top:94px;bottom:0;left:0;width:215px;background:linear-gradient(180deg,#04152b,#020b18);border-right:1px solid #164f84;z-index:10;padding:22px 9px 12px;display:flex;flex-direction:column}.sidebar nav{display:flex;flex-direction:column;gap:9px}.nav-item{display:flex;align-items:center;gap:16px;color:#e5edfa;background:transparent;border:1px solid transparent;border-radius:12px;padding:15px 14px;text-align:left;font-size:15px}.nav-item:first-letter{font-size:22px}.nav-item.active,.nav-item:hover{background:linear-gradient(90deg,#067bff55,#b800ff38);border-color:#078dff;box-shadow:0 0 25px #0077ff30}.logout{margin-top:auto;border:1px solid #d6ae2d;background:#15140e;color:#ffd65a;border-radius:11px;padding:13px}.main{margin-left:215px;padding:116px 14px 35px;min-height:100vh}.page{max-width:1310px;margin:auto}.category-row{display:flex;gap:12px;overflow:auto;padding:0 4px 16px}.cat-btn{white-space:nowrap;padding:12px 20px;border-radius:13px;color:#eaf4ff;background:#071a31;border:1px solid #35699b}.cat-btn.active{background:linear-gradient(90deg,#087cff,#7a19ff);box-shadow:0 0 25px #0077ff70;border-color:#00eaff}.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:15px}.products-area{min-width:0}.section-title,.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-title h3,.page-head h1{margin:0}.section-title small,.page-head p{color:var(--muted);margin:5px 0}.small-btn,.ghost-btn{border:1px solid #4674aa;background:#071a31;color:#eaf4ff;border-radius:10px;padding:10px 15px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.product-card{
position:relative;isolation:isolate;min-height:220px;padding:17px;border:0;border-radius:21px;
background:radial-gradient(circle at 50% 15%,#102a54,#020b1a 68%);
box-shadow:0 0 16px #007cff42,inset 0 0 25px #002a6530;
overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .25s ease;
}
/* Rotating neon ring: the mask keeps the light ONLY on the outer border */
.product-card::before{
content:"";position:absolute;z-index:-2;inset:-2px;border-radius:23px;padding:2px;
background:conic-gradient(
  from 0deg,
  transparent 0deg,
  transparent 22deg,
  #00eaff 42deg,
  #168bff 78deg,
  #7a2cff 125deg,
  #ff19d9 168deg,
  transparent 205deg,
  transparent 265deg,
  #00eaff 305deg,
  #168bff 335deg,
  transparent 360deg
);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:rotatingNeonBorder 4.2s linear infinite;
filter:drop-shadow(0 0 4px #00eaff88) drop-shadow(0 0 9px #7a2cff55);
pointer-events:none;
}
/* Soft blurred duplicate for a subtle premium glow */
.product-card::after{
content:"";position:absolute;z-index:-3;inset:-3px;border-radius:24px;padding:3px;
background:conic-gradient(
  from 0deg,
  transparent 0deg,transparent 25deg,
  #00eaffaa 45deg,#168bffaa 80deg,#7a2cff99 125deg,#ff19d999 170deg,
  transparent 205deg,transparent 270deg,#00eaff88 310deg,#168bff88 340deg,transparent 360deg
);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:rotatingNeonBorder 4.2s linear infinite;
filter:blur(5px);
opacity:.7;
pointer-events:none;
}
@keyframes rotatingNeonBorder{to{transform:rotate(360deg)}}
.product-card:hover{
transform:translateY(-5px) scale(1.015);
filter:brightness(1.1);
box-shadow:0 0 20px #00d9ff70,0 0 38px #8c00ff32,inset 0 0 28px #003d7a55;
}
.product-card:active{
transform:translateY(-1px) scale(.975);
filter:brightness(1.2);
box-shadow:0 0 28px #00f4ff9a,0 0 45px #ff16d866;
}
.product-card:nth-child(2n)::before,.product-card:nth-child(2n)::after{animation-duration:4.7s}
.product-card:nth-child(3n)::before,.product-card:nth-child(3n)::after{animation-duration:3.8s}
.product-card:nth-child(4n)::before,.product-card:nth-child(4n)::after{animation-duration:5s}

.product-card .prod-icon{height:78px;display:grid;place-items:center;font-size:55px;text-shadow:0 0 20px #fff5}.pill{position:absolute;right:9px;top:10px;border:1px solid #8d2dff;color:#fff;border-radius:18px;padding:6px 11px;background:#0b1534}.product-card h4{margin:10px 0 4px;font-size:16px}.price{color:#00f5ff;font-size:18px;font-weight:800}.stock{font-size:13px;color:#d8e2f0;margin-top:5px}.stock.low{color:#ff5570}.add-btn{width:100%;margin-top:10px;border:1px solid #00d7ff;background:#082852;color:#fff;border-radius:9px;padding:8px;font-weight:700}.add-btn:hover{box-shadow:0 0 15px #00cfff66}.cart-panel{border:1px solid #0d659c;border-radius:20px;background:linear-gradient(160deg,#06172d,#020b19);box-shadow:0 0 25px #001a35;display:flex;flex-direction:column;min-height:650px}.cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid #173d64}.cart-head h2{font-size:18px;margin:0}.cart-head h2 b{background:#ff386c;border-radius:50%;padding:5px 9px;margin-left:6px;box-shadow:0 0 18px #ff245e}.cart-items{padding:5px 18px;min-height:240px;max-height:365px;overflow:auto}.empty-cart{height:250px;display:grid;place-items:center;color:#657e9e}.cart-item{display:grid;grid-template-columns:45px 1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #17304f}.cart-item .ci-icon{font-size:28px}.cart-item strong{display:block}.cart-item small{color:#00e8f2}.qty{display:flex;align-items:center;gap:8px;margin-top:6px}.qty button{width:28px;height:28px;border:1px solid #3c6b9c;background:#081b34;color:#fff;border-radius:7px}.qty span{min-width:20px;text-align:center}.remove{background:none;border:0;color:#ff536e;font-size:20px}.cart-summary{margin-top:auto;padding:17px}.cart-summary>div{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.discount-row input{width:65px;background:#071a32;border:1px solid #2d5b8b;color:#fff;border-radius:8px;padding:8px;margin-left:auto}.total{border-top:1px solid #1b426b;padding-top:14px}.total strong{font-size:27px;color:#00f3ff}.payment-title{margin-top:18px!important}.payment-methods{display:grid!important;grid-template-columns:1fr 1fr;gap:9px}.pay{padding:14px;border:1px solid #35608c;background:#071a32;color:#dfe9f8;border-radius:9px}.pay.active{border-color:#00eab9;background:#073b3b;color:#00f4b8;box-shadow:0 0 15px #00eab944}.pay-input{border:1px solid #2b5788;border-radius:10px;padding:0 11px!important}.pay-input input{width:120px;padding:11px;background:transparent;border:0;color:#fff;outline:0;text-align:right}.change strong{font-size:21px;color:#00f0b0}.checkout{width:100%;border:0;border-radius:12px;padding:15px;color:#fff;font-weight:800;font-size:16px;background:linear-gradient(90deg,#00bfff,#7d00ff);box-shadow:0 0 25px #006eff55}.customer-box{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.page-head{margin-bottom:18px}.page-head h1{font-size:28px}.stats-row,.report-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat,.report-card{border:1px solid #194d7c;background:#06172b;border-radius:15px;padding:18px;display:flex;gap:13px;align-items:center}.stat>span{font-size:28px;color:#00dfff}.stat strong,.report-card strong{display:block;font-size:21px;color:#fff;margin-top:4px}.table-card{background:#06172b;border:1px solid #164c79;border-radius:16px;padding:16px}.table-tools{display:flex;gap:10px;margin-bottom:14px}.table-tools input{max-width:420px}.table-tools select{max-width:220px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:13px 10px;border-bottom:1px solid #173553;text-align:left}th{color:#7fc8ff;font-size:13px}td{color:#e4ebf6}.tag{padding:5px 9px;border-radius:15px;font-size:12px}.tag.cash{background:#073d32;color:#00f1b2}.tag.bon{background:#3c2c06;color:#ffd85b}.tag.pending{background:#421f2c;color:#ff7592}.action-btn{border:1px solid #3b6898;background:#071a32;color:#fff;padding:7px 10px;border-radius:7px;margin-right:4px}.action-btn.danger{color:#ff5d73}.report-card{display:block}.report-card span{color:#8ea5c3}.report-list .report-line{display:flex;justify-content:space-between;padding:13px;border-bottom:1px solid #173553}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.setting-card{background:#06172b;border:1px solid #164c79;border-radius:16px;padding:20px}.setting-card h3{margin-top:0}.setting-card label{display:block;color:#9eb3cf;margin:13px 0 6px}.danger-card{border-color:#6c2940}.danger-btn{border:1px solid #ff4f70;background:#361423;color:#ff7991;padding:11px 16px;border-radius:9px}.modal{position:fixed;inset:0;background:#000b;z-index:50;display:grid;place-items:center;padding:20px}.modal-card{width:min(650px,100%);background:#06182e;border:1px solid #168fff;border-radius:18px;padding:22px;box-shadow:0 0 50px #007bff44}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0}.close-modal{border:0;background:none;color:#fff;font-size:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{display:block;color:#9db3ce;margin:5px 0}.toast{position:fixed;right:24px;bottom:25px;z-index:100;background:#08233e;border:1px solid #00cfff;color:#fff;border-radius:12px;padding:14px 18px;box-shadow:0 0 25px #00cfff44;transform:translateY(120px);transition:.3s}.toast.show{transform:translateY(0)}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}.pos-layout{grid-template-columns:1fr}.cart-panel{min-height:auto}.sidebar{width:80px}.sidebar .nav-item span{display:none}.main{margin-left:80px}.brand{width:220px}.top-info .clock{display:none}.settings-grid{grid-template-columns:1fr}.stats-row,.report-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar{height:75px}.brand{width:auto}.brand h2{font-size:15px}.brand span,.brand em{display:none}.crown{font-size:30px}.search-wrap{display:none}.sidebar{top:75px;width:65px}.main{margin-left:65px;padding-top:92px}.product-grid{grid-template-columns:repeat(2,1fr)}.stats-row,.report-cards{grid-template-columns:1fr 1fr}.user-box{min-width:50px}.user-box div{display:none}.form-grid{grid-template-columns:1fr}.login-card{width:calc(100% - 30px)}}

.add-btn{position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .18s ease,background .18s ease}
.add-btn::after{content:"";position:absolute;inset:-60%;background:linear-gradient(90deg,transparent,#00f5ff55,transparent);transform:translateX(-80%) rotate(15deg);transition:transform .45s ease}
.add-btn:hover::after{transform:translateX(80%) rotate(15deg)}
.add-btn:active{transform:scale(.94);background:#0b4d76;box-shadow:0 0 25px #00eaff99,inset 0 0 12px #00eaff66}
.product-card:hover .prod-icon{animation:productBounce .55s ease}
@keyframes productBounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.08)}70%{transform:translateY(2px) scale(.98)}}

@media (prefers-reduced-motion:reduce){.product-card::before,.product-card::after{animation:none}.product-card,.add-btn{transition:none}}