:root{
  --navy:#101a33;
  --navy-2:#172445;
  --ink:#182443;
  --muted:#68738a;
  --muted-2:#8c97ad;
  --line:#e7edf5;
  --line-2:#d8e0eb;
  --canvas:#f4f7fb;
  --panel:#ffffff;
  --panel-soft:#fbfcff;
  --indigo:#5145cd;
  --indigo-soft:#efedff;
  --teal:#19b5b1;
  --teal-soft:#e9faf8;
  --green:#1a9a6b;
  --amber:#d88a19;
  --red:#cf4b5b;
  --shadow-lg:0 28px 80px rgba(16,26,51,.14);
  --shadow-md:0 14px 40px rgba(16,26,51,.08);
  --shadow-sm:0 8px 20px rgba(16,26,51,.05);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 85% 8%,rgba(92,82,212,.16),transparent 24%),
    radial-gradient(circle at 15% 0,rgba(25,181,177,.08),transparent 26%),
    linear-gradient(180deg,#f8faff 0,var(--canvas) 34%,#f1f5fb 100%);
}
button,input,select{font:inherit}
button{cursor:pointer}

.login{
  min-height:100vh;
  background:
    radial-gradient(circle at 74% 16%,rgba(101,89,216,.85),transparent 28%),
    radial-gradient(circle at 18% 8%,rgba(43,210,198,.18),transparent 24%),
    linear-gradient(180deg,#0f1830 0,#121d38 100%);
  display:grid;
  place-items:center;
  padding:24px;
}

.login-card{
  width:min(468px,100%);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;
  padding:36px;
  box-shadow:0 34px 100px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.03em;
}

.brand-mark{
  width:38px;
  height:38px;
  border-radius:13px;
  background:linear-gradient(145deg,#2bd2c6,#6559d8);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:0 12px 22px rgba(81,69,205,.28);
}

.login h1{
  font-size:31px;
  line-height:1.08;
  letter-spacing:-.05em;
  margin:30px 0 10px;
}

.muted{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.form{display:grid;gap:14px;margin-top:25px}
.field{display:grid;gap:7px}

.field label{
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.11em;
}

.field input,.field select{
  height:46px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 14px;
  color:var(--ink);
  outline:none;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.field input:focus,.field select:focus{
  border-color:#9990ec;
  box-shadow:0 0 0 4px #efedff;
}

.hint{
  background:linear-gradient(180deg,#f5f7fd,#eef2fb);
  border:1px solid #e3e8f5;
  border-radius:14px;
  padding:13px 14px;
  margin-top:18px;
  color:#56647d;
  font-size:12px;
  line-height:1.6;
}

.btn{
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:#26385d;
  padding:0 15px;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}

.btn:hover{
  border-color:#b9b3f3;
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.btn.primary{
  background:linear-gradient(135deg,#5d50db,#5145cd);
  color:#fff;
  border-color:#5145cd;
  box-shadow:0 12px 24px rgba(81,69,205,.24);
}

.btn.teal{
  background:linear-gradient(135deg,#20c6bf,#19b5b1);
  color:#fff;
  border-color:#19b5b1;
}

.btn.danger{
  color:var(--red);
  border-color:#efc2c7;
  background:#fffafb;
}

.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
}

.sidebar{
  background:linear-gradient(180deg,#0f1830 0,#101a33 58%,#122041 100%);
  color:#c6d2e9;
  padding:26px 16px;
  display:flex;
  flex-direction:column;
  gap:26px;
  border-right:1px solid rgba(255,255,255,.05);
}

.sidebar .brand{color:#fff;padding:0 10px}

.tenant{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.tenant-icon{
  height:38px;
  width:38px;
  border-radius:12px;
  background:linear-gradient(145deg,#5f54db,#7367ed);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(95,84,219,.3);
}

.tenant b{display:block;color:#fff;font-size:13px}
.tenant small{color:#a5b5d5;font-size:10px;display:block;margin-top:3px}

.nav{display:grid;gap:5px}
.nav small{
  color:#8193b6;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:10px;
  padding:0 10px 6px;
}

.nav button{
  border:0;
  border-radius:12px;
  background:transparent;
  color:#bdc9e0;
  padding:11px 12px;
  text-align:left;
  font-size:13px;
  font-weight:600;
  display:flex;
  gap:10px;
  align-items:center;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}

.nav button.active,.nav button:hover{
  background:linear-gradient(135deg,rgba(105,96,212,.6),rgba(105,96,212,.38));
  color:#fff;
  transform:translateX(2px);
}

.nav button i{font-style:normal;font-size:16px;width:16px;text-align:center}

.side-note{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.09);
  padding:16px 10px 0;
  color:#91a3c5;
  font-size:10px;
  line-height:1.65;
}

.main{min-width:0}

.top{
  height:78px;
  background:rgba(255,255,255,.84);
  border-bottom:1px solid rgba(222,229,239,.86);
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:15px;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
}

.search{
  height:42px;
  width:min(470px,46vw);
  border:1px solid transparent;
  border-radius:13px;
  background:#f4f6fa;
  padding:0 14px;
  color:var(--ink);
  outline:none;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.search:focus{
  background:#fff;
  border-color:#b3abf0;
  box-shadow:0 0 0 4px #f1efff;
}

.top-space{margin-left:auto}
.role{font-size:11px;color:var(--muted)}

.avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#5145cd,#19b5b1);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 10px 18px rgba(81,69,205,.22);
}

.content{
  max-width:1600px;
  margin:0 auto;
  padding:32px 32px 56px;
}

.head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:24px;
}

.eyebrow{
  font-size:10px;
  letter-spacing:.14em;
  color:var(--indigo);
  font-weight:900;
  margin-bottom:8px;
}

.head h1{
  margin:0;
  font-size:33px;
  line-height:1.05;
  letter-spacing:-.05em;
}

.head p{
  font-size:14px;
  color:var(--muted);
  margin:10px 0 0;
}

.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.grid{display:grid;gap:18px}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:linear-gradient(180deg,var(--panel) 0,var(--panel-soft) 100%);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.stat{
  padding:20px;
  min-height:150px;
  position:relative;
}

.stat:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#5d50db,#1dc0ba);
  opacity:.9;
}

.stat span{color:var(--muted);font-size:11px;font-weight:700}
.stat b{display:block;font-size:24px;letter-spacing:-.05em;margin:14px 0 6px}
.stat small{font-size:11px;color:var(--green);font-weight:700}

.split{grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);margin-top:18px}

.card-head{
  padding:19px 20px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.card-head h2{font-size:16px;letter-spacing:-.02em;margin:0}
.card-head p{margin:5px 0 0;font-size:11px;color:var(--muted)}

.link{
  border:0;
  background:transparent;
  color:var(--indigo);
  font-size:11px;
  font-weight:800;
}

.table-wrap{
  overflow:auto;
  border-top:1px solid #edf1f6;
}

table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:640px;
}

th{
  font-size:9px;
  letter-spacing:.08em;
  color:var(--muted-2);
  text-transform:uppercase;
  background:#fbfcfe;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  text-align:left;
}

td{
  font-size:12px;
  color:#344362;
  padding:14px 18px;
  border-bottom:1px solid #edf1f6;
  vertical-align:top;
}

td b{color:var(--ink)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fbfcff}

.status{
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:800;
  display:inline-flex;
  gap:6px;
  align-items:center;
}

.status:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

.status.office_review{color:#765ed2;background:#f0efff}
.status.warehouse{color:#17776f;background:#e5f8f6}
.status.open{color:var(--amber);background:#fff3df}
.status.partial{color:#9c6c12;background:#fff0d5}
.status.paid,.status.active{color:var(--green);background:#e5f8f0}
.status.trial{color:#594c9e;background:#f0efff}
.status.pending{color:#9c6c12;background:#fff0d5}

.customer-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px}
.customer-list{display:grid;gap:10px}

.customer-row{
  padding:14px;
  cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease,background .16s ease;
}

.customer-row:hover,.customer-row.selected{
  border-color:#b6b0f1;
  background:linear-gradient(180deg,#fcfcff,#f8f7ff);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.customer-row b{font-size:13px;display:block}
.customer-row small{color:var(--muted);font-size:10px;display:block;margin-top:4px}
.customer-row em{display:block;font-size:11px;color:var(--amber);font-style:normal;font-weight:800;margin-top:9px}

.customer-detail{padding:20px}

.customer-top{display:flex;gap:12px;align-items:center}

.customer-logo{
  height:48px;
  width:48px;
  background:linear-gradient(135deg,#efedff,#dce9ff);
  color:var(--indigo);
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.customer-top h2{margin:0;font-size:20px;letter-spacing:-.03em}
.customer-top p{font-size:11px;color:var(--muted);margin:5px 0 0}

.key-values{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}

.key{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.key span{font-size:10px;color:var(--muted)}
.key b{display:block;font-size:13px;margin-top:5px}

.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:18px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.product{
  padding:14px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.product:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#dcdffa;
}

.product h3{
  font-size:13px;
  line-height:1.4;
  min-height:36px;
  margin:8px 0;
}

.product small{font-size:9px;color:var(--muted)}

.product-price{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:12px;
  font-weight:800;
}

.round-add{
  height:31px;
  width:31px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#efedff,#e4f9f6);
  color:var(--indigo);
  font-size:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.cat{
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  padding:8px 12px;
  margin:0 6px 12px 0;
}

.cat.active{
  color:var(--indigo);
  background:#f0efff;
  border-color:#c7c2f3;
  box-shadow:0 8px 18px rgba(81,69,205,.08);
}

.cart{
  padding:18px;
  position:sticky;
  top:94px;
}

.cart h2{font-size:16px;margin:0 0 2px}

.cart-customer{
  margin:12px 0;
  padding:11px 12px;
  background:linear-gradient(180deg,#f7f9fd,#f0f4fb);
  border:1px solid #e4eaf4;
  border-radius:12px;
  font-size:11px;
  color:var(--muted);
}

.cart-customer b{
  display:block;
  color:var(--ink);
  font-size:12px;
  margin-bottom:2px;
}

.cart-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:11px 0;
  border-top:1px solid #eef1f5;
}

.cart-line b{font-size:11px;display:block}
.cart-line small{font-size:9px;color:var(--muted);display:block;margin-top:3px}

.qty{display:flex;gap:5px;align-items:center}

.qty button{
  height:24px;
  width:24px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
}

.qty span{font-size:11px;width:20px;text-align:center}

.totals{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.total{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:4px 0}
.tax-rate{color:#765ed2}
.total b{color:var(--ink)}
.total.grand{font-size:13px;font-weight:900;color:var(--ink);padding-top:10px}

.audit{padding:4px 18px 12px}

.audit-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:13px 0;
  border-top:1px solid #eef1f5;
}

.audit-row b{font-size:11px;display:block}
.audit-row span{font-size:10px;color:var(--muted);display:block;margin-top:3px}
.audit-row time{font-size:9px;color:var(--muted);white-space:nowrap}

.modal-bg{
  position:fixed;
  inset:0;
  background:rgba(9,20,42,.56);
  z-index:50;
  display:grid;
  place-items:center;
  padding:18px;
  backdrop-filter:blur(6px);
}

.modal{
  background:#fff;
  border-radius:20px;
  width:min(560px,100%);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
}

.modal h2{font-size:17px;margin:0}

.modal-head{
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.modal-body{padding:20px}

.modal-foot{
  padding:14px 20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.close{
  border:0;
  background:#f4f6fa;
  border-radius:9px;
  height:30px;
  width:30px;
  font-size:18px;
}

.radio{
  display:flex;
  gap:8px;
  align-items:start;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  font-size:11px;
  margin-top:8px;
  background:#fff;
}

.radio span{display:block;color:var(--muted);font-size:10px;margin-top:3px}

.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:var(--navy);
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  font-size:12px;
  z-index:60;
}

.empty{padding:34px 17px;text-align:center;color:var(--muted);font-size:12px}

.test-product-image{
  height:84px;
  border-radius:14px;
  margin-bottom:11px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#eceaff,#d9f9f4);
  font-size:33px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.test-product-image.large{
  height:126px;
  font-size:56px;
  margin:0;
}

.test-product-image:before{
  content:"";
  position:absolute;
  width:120%;
  height:65%;
  bottom:-27%;
  background:#ffffff80;
  border-radius:50%;
  transform:rotate(-8deg);
}

.test-product-image span,.test-product-image small{position:relative;z-index:1}

.test-product-image small{
  position:absolute;
  right:8px;
  bottom:7px;
  font-size:8px;
  letter-spacing:.08em;
  font-weight:900;
  color:#38496d;
}

.test-product-image.sample-water{background:linear-gradient(145deg,#d5efff,#d6e3ff)}
.test-product-image.sample-coffee{background:linear-gradient(145deg,#f4dfc8,#eac29d)}
.test-product-image.sample-oil{background:linear-gradient(145deg,#edf5d2,#d9e9a9)}
.test-product-image.sample-tomato{background:linear-gradient(145deg,#ffe0dc,#ffc8c0)}
.test-product-image.sample-towels{background:linear-gradient(145deg,#e7edf5,#d9e2f0)}

.stock-notice{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  border:1px solid #e4dafd;
  background:linear-gradient(135deg,#f6f3ff,#eef8ff);
  border-radius:14px;
  color:#594c9e;
  font-size:12px;
  margin-bottom:16px;
}

.stock-notice span{color:#6a6284}
.stock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stock-card>div:last-child{padding:15px}
.stock-card h3{font-size:14px;margin:7px 0}
.stock-card p{font-size:10px;color:var(--muted);margin:6px 0 12px}
.stock-card small{font-size:9px;color:var(--muted)}
.stock-count{font-size:20px;color:var(--green)}
.stock-count.low{color:var(--amber)}
.stock-positive{color:var(--green)}
.stock-negative{color:var(--red)}

.billing-card{padding:24px}
.billing-card h2{font-size:20px;margin:9px 0}
.billing-card p{font-size:12px;line-height:1.7;color:var(--muted);min-height:75px}

.check-list{
  display:grid;
  gap:7px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfcfe;
  margin-top:10px;
}

.check-list label{font-size:11px;color:#384761}
.check-list input{vertical-align:middle}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.error{color:var(--red);font-size:12px;margin:14px 0 0}

.customer-stage{
  padding:19px;
  border:1px solid #e7ebf4;
  border-radius:18px;
  background:linear-gradient(135deg,#fbfcff,#f5f7fc);
  margin-bottom:16px;
  box-shadow:inset 0 1px 0 #fff;
}

.customer-stage .muted{max-width:840px}
.table-actions{display:flex;gap:7px;flex-wrap:wrap}
.toolbar-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.focus-banner{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:15px 16px;
  margin-bottom:16px;
  border:1px solid #dadffc;
  border-radius:14px;
  background:linear-gradient(135deg,#f5f3ff,#eef8ff);
  box-shadow:var(--shadow-sm);
}

.focus-banner b{display:block;font-size:13px;color:var(--ink)}
.focus-banner span{font-size:11px;color:var(--muted)}

.premium-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff,#f7f9ff);
}

.premium-card:before{
  content:"";
  position:absolute;
  top:-90px;
  right:-40px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,#ece9ff 0,rgba(236,233,255,0) 68%);
}

.premium-card>*{position:relative}

.invoice-stage{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding:17px;
  border:1px solid #e9ecf5;
  border-radius:15px;
  background:linear-gradient(135deg,#fcfdff,#f6f8fc);
  margin-bottom:16px;
}

.invoice-stage small{
  display:block;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.invoice-stage b{display:block;font-size:18px;color:var(--ink)}
.invoice-stage p{margin:4px 0 0;font-size:11px;color:var(--muted)}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid transparent;
}

.status-chip:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}

.status-chip.open{color:var(--amber);background:#fff4df;border-color:#ffe2ae}
.status-chip.partial{color:#9c6c12;background:#fff0d8;border-color:#ffd9a7}
.status-chip.paid{color:var(--green);background:#e7f7ee;border-color:#bbe8cf}
.status-chip.pending{color:#765ed2;background:#f0efff;border-color:#d7d1ff}

@media(max-width:1060px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .product-grid,.stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .shell{display:block}
  .sidebar{display:none}
  .top{padding:0 15px}
  .top .search{width:auto;flex:1}
  .content{padding:22px 15px}
  .split,.customer-layout,.order-layout{grid-template-columns:1fr}
  .cart{position:static}
  .head{display:block}
  .actions{justify-content:flex-start;margin-top:14px}
  .customer-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .key-values{grid-template-columns:1fr}
  .product-grid,.stock-grid,.form-grid{grid-template-columns:1fr}
  .stock-notice{display:grid}
  .modal{max-height:92vh;overflow:auto}
  .invoice-stage,.focus-banner{display:grid}
}

@media(max-width:420px){
  .stats,.customer-list{grid-template-columns:1fr}
  .role{display:none}
}