@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --font-sans:"Plus Jakarta Sans","Segoe UI Variable","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ink:#12213d;
  --ink-soft:#53627a;
  --blue:#246be8;
  --blue-2:#4b8df8;
  --blue-soft:#eaf2ff;
  --cyan:#11a8c7;
  --violet:#7a63e8;
  --orange:#ef8f35;
  --green:#18a66b;
  --red:#dc4c4c;
  --card:rgba(255,255,255,.82);
  --card-strong:rgba(255,255,255,.94);
  --line:rgba(92,119,157,.16);
  --shadow:0 18px 45px rgba(42,73,117,.10);
  --shadow-soft:0 8px 28px rgba(42,73,117,.07);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
}


svg{display:inline-block;vertical-align:middle;max-width:100%;height:auto}
.brand-name,.brand-sub,.topbar-kicker,.user-meta strong,.user-meta span{display:block}
.topbar-actions{flex-wrap:wrap;justify-content:flex-end}
.user-chip{max-width:100%}
@media (max-width: 560px){.topbar{align-items:flex-start}.topbar-actions{width:100%;justify-content:space-between}.user-meta strong{max-width:100px}}

*{box-sizing:border-box}
html{min-height:100%;background:#eef3fa}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(59,119,230,.22),transparent 28%),
    linear-gradient(135deg,#74a0e4 0%,#b9cceb 30%,#e1e8f2 62%,#f1f3f6 82%,#f7f7f8 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
::selection{background:#cfe0ff;color:#0e356e}

.app{min-height:100vh;display:flex;position:relative}
.sidebar{
  width:268px;
  position:fixed;
  inset:18px auto 18px 18px;
  z-index:30;
  overflow:auto;
  padding:18px 14px;
  color:#21334f;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(239,246,255,.82),rgba(255,255,255,.66));
  box-shadow:0 22px 55px rgba(35,74,127,.17),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}
.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-thumb{background:rgba(55,91,139,.18);border-radius:99px}
.brand{display:flex;align-items:center;gap:12px;padding:6px 9px 18px;margin-bottom:4px}
.brand-badge{
  width:42px;height:42px;flex:0 0 42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#2878f2,#5ca0ff);
  color:#fff;box-shadow:0 9px 22px rgba(36,107,232,.28);
}
.brand-badge svg{width:22px;height:22px}
.brand-copy{min-width:0}.brand-name{display:block;font-size:18px;font-weight:800;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{display:block;margin-top:2px;font-size:10px;font-weight:600;color:#74839a;letter-spacing:.02em}
.nav-title{font-size:10px;text-transform:uppercase;color:#8b98aa;padding:15px 11px 6px;letter-spacing:.12em;font-weight:800}
.nav{padding-bottom:12px}.nav a{display:flex;align-items:center;gap:11px;min-height:45px;padding:9px 11px;border-radius:14px;margin:3px 0;color:#465976;font-size:13.5px;font-weight:600;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease;border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.58);color:#173d75;transform:translateX(2px)}
.nav a.active{color:#1762d1;background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(56,99,158,.11),inset 0 1px 0 #fff}
.nav-icon{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav a.active .nav-icon{filter:drop-shadow(0 3px 7px rgba(36,107,232,.20))}
.nav-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{margin-top:14px;padding:12px 12px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.48);border-radius:16px;color:#56677f;font-size:11px;line-height:1.5}.sidebar-footer strong{display:block;color:#253a5d;font-size:12px;margin-bottom:1px}

.main{margin-left:304px;width:calc(100% - 304px);min-width:0;padding:18px 18px 18px 0}
.topbar{
  min-height:68px;
  border:1px solid rgba(255,255,255,.70);
  border-radius:22px;
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 15px 10px 18px;
  position:sticky;top:18px;z-index:20;
}
.topbar-left{display:flex;align-items:center;gap:11px;min-width:0}.topbar-title{display:flex;flex-direction:column;min-width:0}.topbar-title strong{font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-kicker{font-size:9px;line-height:1.2;text-transform:uppercase;letter-spacing:.12em;color:#8391a4;font-weight:800;margin-bottom:4px}
.topbar-actions{display:flex;align-items:center;gap:8px}.user-chip{display:flex;align-items:center;gap:9px;padding:6px 8px 6px 6px;border:1px solid rgba(104,128,161,.14);background:rgba(255,255,255,.55);border-radius:14px;min-width:0}.user-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#246be8,#78a8ef);box-shadow:0 6px 16px rgba(36,107,232,.20);font-size:12px;font-weight:800}.user-meta{line-height:1.15;min-width:0}.user-meta strong{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.user-meta span{display:block;font-size:9.5px;color:#7a8799;margin-top:3px}
.hamb{display:none;width:40px;height:40px;border:1px solid rgba(98,126,165,.16);background:rgba(255,255,255,.62);border-radius:13px;cursor:pointer;place-items:center;box-shadow:0 5px 14px rgba(52,84,129,.07)}.hamb svg{width:19px;height:19px;stroke:#345071;fill:none;stroke-width:2;stroke-linecap:round}
.content{padding:24px 4px 4px}
.sidebar-backdrop{display:none}

.page-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:2px 2px 20px}.page-hero .h1{margin-bottom:6px}.page-hero .sub{margin:0}
.h1{font-size:26px;line-height:1.18;font-weight:800;letter-spacing:-.035em;margin:0 0 5px;color:#10233f}
.sub{margin:0 0 19px;color:#68778d;font-size:13px;line-height:1.65}
h3{margin:0 0 14px;font-size:15px;letter-spacing:-.02em;color:#1b3152}
.muted{color:#738097}.small{font-size:11px}

.grid{display:grid;gap:15px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.82);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
}
.card:hover{border-color:rgba(255,255,255,.94)}
.stat-card{position:relative;overflow:hidden;min-height:124px}.stat-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-40px;top:-42px;background:rgba(83,133,224,.07);pointer-events:none}.stat-top{display:flex;align-items:center;gap:11px}.stat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 40px;border:1px solid rgba(255,255,255,.75);box-shadow:0 7px 18px rgba(50,82,127,.08)}.stat-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.stat-blue{background:#e8f1ff;color:#286edb}.stat-violet{background:#f0ebff;color:#7258d9}.stat-cyan{background:#e4f7fa;color:#1492ae}.stat-orange{background:#fff1e4;color:#e17d23}
.stat-label{font-size:11px;color:#738098;font-weight:600}.stat-value{font-size:23px;line-height:1.15;font-weight:800;letter-spacing:-.035em;margin-top:13px;color:#132846}.stat-note{margin-top:8px;font-size:10px;color:#8a96a8}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.section-head h3{margin:0}.section-link{font-size:11px;color:#2b70d9;font-weight:700}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
.btn{border:0;border-radius:12px;padding:10px 14px;min-height:39px;cursor:pointer;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,#246be8,#4d8df5);color:#fff;box-shadow:0 8px 20px rgba(36,107,232,.22)}.btn-primary:hover{box-shadow:0 10px 24px rgba(36,107,232,.27)}
.btn-dark{background:linear-gradient(135deg,#183153,#274a72);color:#fff;box-shadow:0 8px 18px rgba(25,49,83,.16)}
.btn-light{background:rgba(255,255,255,.66);color:#345171;border:1px solid rgba(86,113,151,.14);box-shadow:0 5px 14px rgba(43,77,122,.05)}
.btn-danger{background:linear-gradient(135deg,#cf4545,#e56868);color:#fff;box-shadow:0 8px 18px rgba(207,69,69,.16)}.btn-sm{padding:7px 10px;min-height:32px;font-size:10.5px;border-radius:10px}

.form-group{margin-bottom:14px}.form-group label{display:block;font-size:11px;font-weight:700;margin-bottom:7px;color:#4c5d75}.form-control{width:100%;border:1px solid rgba(104,127,158,.22);border-radius:12px;padding:10px 12px;min-height:41px;background:rgba(255,255,255,.75);color:#1c2e49;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.68);transition:border-color .16s,box-shadow .16s,background .16s}.form-control::placeholder{color:#9aa6b5}.form-control:focus{border-color:#79a8ee;background:#fff;box-shadow:0 0 0 4px rgba(54,122,226,.10)}textarea.form-control{min-height:92px;resize:vertical}select.form-control{cursor:pointer}

.table-wrap{overflow:auto;border-radius:14px}table{width:100%;border-collapse:separate;border-spacing:0}th,td{padding:11px 10px;border-bottom:1px solid rgba(116,137,166,.12);text-align:left;font-size:11.5px;vertical-align:middle;white-space:nowrap}th{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:#7a8799;background:rgba(243,247,252,.66);font-weight:800}tbody tr{transition:background .15s}tbody tr:hover{background:rgba(236,244,255,.52)}tbody tr:last-child td{border-bottom:0}td strong{font-weight:700;color:#203957}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9.5px;font-weight:800}.badge-ok{background:#e6f8ef;color:#138653}.badge-warn{background:#fff3d8;color:#986515}.badge-danger{background:#feeaea;color:#b43e3e}
.alert{padding:12px 14px;border-radius:13px;margin-bottom:15px;font-size:12px;border:1px solid transparent;box-shadow:0 6px 16px rgba(45,74,113,.05)}.alert-success{background:rgba(226,248,237,.88);color:#1f7851;border-color:rgba(63,163,111,.14)}.alert-danger{background:rgba(254,233,233,.90);color:#a03939;border-color:rgba(200,76,76,.14)}

.kpi-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed rgba(110,132,162,.18);font-size:11.5px}.kpi-line:last-child{border-bottom:0}.kpi-line strong{color:#1d3454;font-weight:800;text-align:right}.kpi-line small{line-height:1.4}

.pos-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);gap:15px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.product-card{border:1px solid rgba(100,129,166,.16);border-radius:15px;padding:13px;background:rgba(255,255,255,.70);cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s,background .16s;box-shadow:0 5px 16px rgba(42,76,120,.04)}.product-card:hover{transform:translateY(-2px);border-color:rgba(54,122,226,.30);background:#fff;box-shadow:0 12px 25px rgba(52,90,143,.09)}.product-name{font-weight:750;font-size:12px;line-height:1.4}.product-price{margin-top:7px;color:#246be8;font-weight:800;font-size:12.5px}.product-stock{font-size:10px;color:#8490a0;margin-top:5px}.cart-row{display:grid;grid-template-columns:1fr 70px 100px 34px;gap:7px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(111,133,163,.13);font-size:11px}.cart-total{font-size:24px;font-weight:800;letter-spacing:-.035em;color:#153153}

.login-wrap,.install-wrap{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 17% 13%,rgba(53,117,225,.28),transparent 30%),linear-gradient(135deg,#79a2e2,#c3d2e9 43%,#edf0f4 77%,#f6f6f7)}.login-card,.install-card{width:min(450px,100%);background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.88);border-radius:24px;padding:28px;box-shadow:0 25px 60px rgba(42,72,113,.18),inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.install-card{width:min(780px,100%)}.login-logo{width:54px;height:54px;background:linear-gradient(145deg,#246be8,#68a1f3);color:#fff;border-radius:17px;display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:17px;box-shadow:0 10px 25px rgba(36,107,232,.25)}

.receipt{max-width:340px;margin:auto;background:#fff;padding:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:8px}.receipt hr{border:0;border-top:1px dashed #777}.receipt-line{display:flex;justify-content:space-between;gap:10px}
.no-print{}

@media print{body{background:#fff}.no-print,.sidebar,.topbar,.sidebar-backdrop{display:none!important}.main{margin:0;padding:0;width:100%}.content{padding:0}.card{border:0;box-shadow:none;background:#fff;backdrop-filter:none}.receipt{max-width:100%}}
@media(max-width:1180px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pos-layout{grid-template-columns:1fr}}
@media(max-width:900px){
  body.nav-open{overflow:hidden}
  .sidebar{width:min(290px,calc(100vw - 34px));inset:12px auto 12px 12px;transform:translateX(calc(-100% - 30px));transition:transform .22s cubic-bezier(.2,.8,.2,1);z-index:60}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:50;border:0;background:rgba(17,39,70,.22);opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
  body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .main{margin-left:0;width:100%;padding:12px}
  .topbar{top:12px;border-radius:18px;min-height:62px;padding:8px 10px}
  .hamb{display:grid}
  .content{padding:20px 2px 2px}
  .page-hero{align-items:flex-start}.page-hero .btn{display:none}
  .user-meta{display:none}.user-chip{padding:5px}.user-avatar{width:32px;height:32px}
}
@media(max-width:650px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.h1{font-size:22px}.sub{font-size:12px}.content{padding-top:16px}.page-hero{margin-bottom:16px}.card{padding:15px;border-radius:16px}.stat-card{min-height:112px}.stat-value{font-size:21px}.toolbar{align-items:stretch}.toolbar>*{max-width:100%}.topbar-kicker{display:none}.topbar-title strong{font-size:13px}.topbar-actions .btn{padding:8px 10px;min-height:34px}.cart-row{grid-template-columns:1fr 60px 82px 30px}.form-control{font-size:16px}}
@media(max-width:440px){.product-grid{grid-template-columns:1fr}.main{padding:8px}.topbar{top:8px}.content{padding-top:14px}.page-hero{margin-left:0;margin-right:0}.card{padding:14px}.stat-top{align-items:flex-start}.table-wrap{margin-left:-4px;margin-right:-4px}.login-card,.install-card{padding:22px;border-radius:20px}}


.brand{align-items:center}
.brand-mark{width:54px;height:54px;flex:0 0 54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.78);box-shadow:0 9px 22px rgba(36,107,232,.12);overflow:hidden;padding:6px;border:1px solid rgba(255,255,255,.9)}
.brand-mark img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.brand-copy{gap:1px}
.brand-name{font-size:17px}
.login-logo{width:88px;height:88px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 24px rgba(36,107,232,.12);padding:10px}
.login-logo img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:800px){.brand-mark{width:48px;height:48px;flex-basis:48px}.brand-name{font-size:16px}}


/* v1.0.4 SVG logo refinements */
.brand-mark{width:60px;height:60px;flex:0 0 60px;padding:5px;background:rgba(255,255,255,.96);box-shadow:0 10px 22px rgba(24,65,128,.14)}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.login-logo{width:94px;height:94px;padding:10px;background:rgba(255,255,255,.96)}
@media (max-width:800px){.brand-mark{width:52px;height:52px;flex-basis:52px;padding:5px}}