:root{
  --bg:#f3f7ff;
  --panel:#ffffff;
  --panel-2:#f8fbff;
  --text:#172033;
  --muted:#667085;
  --brand:#2563eb;
  --brand2:#1d4ed8;
  --brand3:#60a5fa;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --line:#dbe4f0;
  --soft:#eef4ff;
  --shadow:0 18px 42px rgba(15,23,42,.08);
  --shadow-sm:0 10px 25px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 24%),
    linear-gradient(180deg,#f8fbff 0%, #f3f7ff 45%, #edf3ff 100%);
}
body::selection{background:#dbeafe;color:#0f172a}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#edf2fa}
::-webkit-scrollbar-thumb{background:#c3d2ea;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#9fb5d7}

.license-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(circle at 10% 10%, rgba(37,99,235,.20), transparent 26%),
  radial-gradient(circle at 90% 20%, rgba(59,130,246,.16), transparent 24%),
  linear-gradient(135deg,#e9f1ff,#f8fbff 55%,#eef4ff);
}
.license-card{
  width:100%;max-width:560px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:26px;box-shadow:0 24px 60px rgba(15,23,42,.12);padding:28px;
}
.license-code-box{
  background:#0f172a;color:#dbeafe;border-radius:16px;padding:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;letter-spacing:.04em;word-break:break-all;
}
.license-status{display:inline-flex;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.license-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.license-small{font-size:12px;color:#667085;line-height:1.55}

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at 10% 10%, rgba(37,99,235,.20), transparent 26%),
    radial-gradient(circle at 90% 20%, rgba(59,130,246,.16), transparent 24%),
    linear-gradient(135deg,#e9f1ff,#f8fbff 55%,#eef4ff);
}
.login-card{
  width:100%;
  max-width:430px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:26px;
  box-shadow:0 24px 60px rgba(15,23,42,.12);
  padding:28px;
}
.logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.logo-badge{
  width:52px;height:52px;border-radius:18px;
  background:linear-gradient(135deg,var(--brand),var(--brand3));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:22px;box-shadow:0 16px 30px rgba(37,99,235,.30)
}
.login-brand-full{
  width:260px;max-width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.10)
}
.sidebar-brand-full{
  width:190px;max-width:100%;height:auto;display:block;background:#fff;
  border-radius:16px;padding:8px;box-shadow:0 10px 24px rgba(15,23,42,.24)
}
.sidebar .brand.brand-logo-wrap{display:block}
h1,h2,h3{margin:0}
.login-card h1{font-size:29px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.55}
.form-row{margin:13px 0}
label{display:block;font-weight:700;margin-bottom:6px;font-size:13px;color:#344054}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 13px;
  background:#fbfdff;
  color:var(--text);
  outline:none;
  transition:.2s ease;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
input:hover,select:hover,textarea:hover{border-color:#bfd0eb;background:#fff}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12), 0 10px 24px rgba(37,99,235,.08);
}
textarea{min-height:80px;resize:vertical}

.btn{
  border:0;border-radius:14px;padding:10px 14px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;font-weight:800;letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.btn:hover{filter:brightness(1.02);transform:translateY(-1px);box-shadow:0 14px 28px rgba(37,99,235,.26)}
.btn.secondary{background:#eef2ff;color:#1e40af;box-shadow:none}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.success{background:linear-gradient(135deg,#16a34a,#15803d)}
.btn.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.btn.blue{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.btn.whatsapp{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.btn.whatsapp:hover{background:linear-gradient(135deg,#16a34a,#15803d)}
.btn.small{padding:6px 10px;border-radius:10px;font-size:12px}
.demo-box{
  background:linear-gradient(180deg,#f8fbff,#f4f8ff);
  border:1px solid var(--line);
  border-radius:16px;padding:12px;margin-top:14px;font-size:13px;line-height:1.7
}

.app{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.14), transparent 24%),
    linear-gradient(180deg,#0f172a 0%, #111b31 55%, #172554 100%);
  color:#cbd5e1;
  padding:18px;
  position:sticky;top:0;height:100vh;overflow:auto;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:20px 0 40px rgba(15,23,42,.10)
}
.sidebar .brand{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:22px}
.sidebar .brand span{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand3));
  display:flex;align-items:center;justify-content:center;font-weight:900;
  box-shadow:0 12px 26px rgba(37,99,235,.30)
}
.nav button{
  width:100%;background:transparent;color:#cbd5e1;border:1px solid transparent;
  text-align:left;padding:12px 13px;border-radius:14px;margin:4px 0;font-weight:700;
  transition:.18s ease;position:relative;
}
.nav button:hover,.nav button.active{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(148,163,184,.18);
  transform:translateX(2px);
}
.nav button.active::before{
  content:"";
  position:absolute;left:0;top:10px;bottom:10px;width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
}
.nav .role-note{
  font-size:12px;color:#94a3b8;margin:15px 8px;
  padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)
}

.main{
  padding:22px 24px 34px;min-width:0;position:relative;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:22px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;
  padding:14px 16px;
  box-shadow:var(--shadow-sm)
}
.topbar h2{font-size:28px;letter-spacing:-.02em}
.user-chip{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:999px;padding:7px 11px;
  box-shadow:0 8px 20px rgba(15,23,42,.06)
}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-weight:900
}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.panel,.chart-card,.reminder-card,.calendar-day,.modal-card,.login-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card{
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;left:0;top:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--brand),#60a5fa,#93c5fd);
}
.card:hover,.panel:hover,.chart-card:hover,.reminder-card:hover,.calendar-day:hover,.modal-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.card-title{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.card-value{font-size:30px;font-weight:900;margin-top:10px;letter-spacing:-.02em}
.card-foot{font-size:12px;color:var(--muted);margin-top:7px}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .left,.toolbar .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel{
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  padding:18px;margin-bottom:18px
}
.panel h3{font-size:18px;margin-bottom:12px;letter-spacing:-.01em}

.table-wrap{
  overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)
}
table{width:100%;border-collapse:collapse;min-width:850px}
th,td{padding:12px 12px;border-bottom:1px solid #e9eef6;text-align:left;font-size:13px;vertical-align:middle}
th{
  background:linear-gradient(180deg,#f8fbff,#f2f7ff);
  color:#475467;font-weight:900;position:sticky;top:0;z-index:1
}
tbody tr:nth-child(even) td{background:#fcfdff}
tr:hover td{background:#f6faff}

.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:900}
.badge.green{background:#dcfce7;color:#166534}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.yellow{background:#fef3c7;color:#92400e}
.badge.blue{background:#dbeafe;color:#1e40af}
.badge.gray{background:#f1f5f9;color:#475569}

.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.form-grid .wide{grid-column:span 2}
.form-grid .full{grid-column:1/-1}
.pos-layout{display:grid;grid-template-columns:1.3fr .9fr;gap:16px}
.product-search{display:grid;grid-template-columns:1.3fr 1fr 120px 90px;gap:8px;margin-bottom:12px}

.barcode-tools{
  display:grid;
  grid-template-columns:1.4fr 110px 140px 180px 1fr;
  gap:8px;
  align-items:center;
  background:linear-gradient(180deg,#f8fbff,#f4f8ff);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  margin:12px 0;
}
.barcode-tools .scan-msg{font-size:12px;font-weight:800;color:#475569}
.barcode-label-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:flex-start}
.barcode-label{
  width:2in; min-width:2in; max-width:2in;
  height:1in; min-height:1in; max-height:1in;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:4px 6px;
  background:#fff;
  text-align:center;
  break-inside:avoid;
  box-sizing:border-box;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 1px 4px rgba(15,23,42,.05);
}
.barcode-label-name{display:block;font-size:10px;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barcode-label-price{display:block;font-size:9px;font-weight:700;color:#0f172a;margin-top:1px}
.barcode-label-code{display:block;font-size:9px;color:#475569;line-height:1;margin-top:2px}
.barcode-svg{width:100%;height:34px;display:block;margin:2px auto 0;flex:1 1 auto}
.barcode-label-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.barcode-label-foot .barcode-label-code{margin-top:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.barcode-label-foot .barcode-label-price{text-align:right;white-space:nowrap}
.camera-box{background:#020617;border-radius:18px;padding:12px;text-align:center}
.camera-box video{width:100%;max-height:420px;border-radius:14px;background:#000}
@media(max-width:900px){.barcode-tools{grid-template-columns:1fr 100px}.barcode-tools .btn{width:100%}}

.cart-row{display:grid;grid-template-columns:1fr 90px 100px 90px 38px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.cart-row strong{font-size:13px}
.total-box{
  background:linear-gradient(180deg,#f8fbff,#f3f8ff);
  border:1px solid var(--line);border-radius:18px;padding:13px;margin-top:12px
}
.total-line{display:flex;justify-content:space-between;margin:8px 0;font-size:14px}
.total-line.big{font-size:22px;font-weight:900;border-top:1px dashed #cbd5e1;padding-top:10px;margin-top:10px}
.alert{border-radius:16px;padding:12px 13px;margin:10px 0;font-weight:700;font-size:13px}
.alert.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.alert.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.alert.danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tab{
  border:1px solid var(--line);background:#fff;color:#334155;
  border-radius:999px;padding:9px 13px;font-weight:800;
  transition:.18s ease;box-shadow:0 2px 6px rgba(15,23,42,.03)
}
.tab:hover{background:#f8fbff;border-color:#bfd0eb}
.tab.active{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;border-color:#0f172a}

.modal{
  position:fixed;inset:0;background:rgba(15,23,42,.55);
  display:flex;align-items:flex-start;justify-content:center;z-index:20;padding:38px 18px;overflow:auto;
  backdrop-filter:blur(4px)
}
.modal-card{
  background:#fff;width:100%;max-width:800px;border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.16);padding:18px;border:1px solid #eef2f7
}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.close{background:#f1f5f9;border:0;border-radius:12px;padding:8px 10px;font-weight:900}
.kpi-list{display:grid;gap:10px}
.kpi-item{
  display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:14px;
  background:linear-gradient(180deg,#f8fbff,#f4f8ff);border:1px solid var(--line)
}
.progress{height:9px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand3));width:0}
.receipt{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.45;white-space:pre-wrap;background:#fff;
  border:1px dashed #94a3b8;padding:16px;border-radius:14px
}
.print-only{display:none}

.reminder-card{
  background:linear-gradient(180deg,#fff7ed,#fffaf5);
  border:1px solid #fed7aa;border-radius:20px;padding:14px;margin-bottom:12px;
  box-shadow:var(--shadow-sm)
}
.reminder-card strong{color:#9a3412}
.reminder-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.reminder-meta span{background:#ffedd5;color:#9a3412;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900}
.reminder-top-alert{
  background:linear-gradient(180deg,#fff7ed,#fffaf4);
  border:1px solid #fed7aa;color:#9a3412;border-radius:18px;padding:14px;margin-bottom:16px;font-weight:800
}

.chart-card{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm);padding:18px;margin-bottom:18px
}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.chart-head h3{font-size:18px;margin:0}
.chart-wrap{width:100%;overflow:auto}
.chart-svg{
  width:100%;min-width:620px;height:280px;display:block;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid var(--line);border-radius:18px
}
.chart-axis{stroke:#cbd5e1;stroke-width:1}
.chart-grid{stroke:#e5e7eb;stroke-width:1}
.chart-line{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chart-line-profit{fill:none;stroke:var(--success);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chart-dot{fill:var(--brand);stroke:#fff;stroke-width:3}
.chart-dot-profit{fill:var(--success);stroke:#fff;stroke-width:3}
.chart-bar{fill:var(--brand);rx:8;ry:8}
.chart-bar-expense{fill:var(--danger);rx:8;ry:8}
.chart-label{font-size:12px;fill:#475569;font-weight:700}
.chart-value{font-size:11px;fill:#0f172a;font-weight:800}
.chart-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#475569;margin-top:10px}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--brand)}
.legend-dot.green{background:var(--success)}
.legend-dot.red{background:var(--danger)}
.chart-empty{
  padding:28px;text-align:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;color:#475569;font-weight:700
}
@media(max-width:640px){.chart-svg{min-width:560px;height:260px}}

.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.calendar-head{font-size:12px;font-weight:900;color:#475467;text-align:center;padding:7px 0}
.calendar-day{
  min-height:118px;background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid var(--line);border-radius:16px;padding:10px;
  box-shadow:0 6px 18px rgba(15,23,42,.04);cursor:pointer
}
.calendar-day:hover{border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.08), 0 14px 30px rgba(15,23,42,.08)}
.calendar-day.active{border-color:var(--brand);background:#eff6ff}
.calendar-day.empty{background:transparent;border:0;box-shadow:none;cursor:default}
.calendar-date{display:flex;justify-content:space-between;align-items:center;font-weight:900;margin-bottom:7px}
.calendar-lines{display:grid;gap:4px;font-size:11px;color:#475569}
.calendar-lines span{display:flex;justify-content:space-between;gap:5px;background:#f8fafc;border-radius:8px;padding:3px 5px}
@media(max-width:900px){.calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-head{display:none}}

@media(max-width:1050px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .pos-layout,.two,.three{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .main{padding:14px}
  .cards,.form-grid{grid-template-columns:1fr}
  .form-grid .wide{grid-column:auto}
  .product-search{grid-template-columns:1fr}
  .cart-row{grid-template-columns:1fr 70px 80px 80px 38px}
  .topbar{align-items:flex-start;flex-direction:column}
  .topbar h2{font-size:24px}
}
@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{position:absolute;left:0;top:0;width:100%}}

.urdu-mode{direction:rtl;font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Noto Naskh Arabic','Segoe UI',Arial,sans-serif}
.urdu-mode .sidebar{border-left:1px solid var(--border);border-right:0}
.urdu-mode .nav button,.urdu-mode label,.urdu-mode h1,.urdu-mode h2,.urdu-mode h3,.urdu-mode .sub,.urdu-mode .alert{text-align:right}
.urdu-mode input,.urdu-mode textarea,.urdu-mode select{direction:rtl;text-align:right}
.urdu-mode input[type='number'],.urdu-mode input[type='date'],.urdu-mode input[type='month'],.urdu-mode #barcodeScanInput,.urdu-mode #licenseKeyInput{direction:ltr;text-align:left}
.urdu-mode .toolbar,.urdu-mode .topbar,.urdu-mode .product-search,.urdu-mode .barcode-tools{direction:rtl}
.urdu-mode table{direction:rtl}
.urdu-mode .chart-card,.urdu-mode .receipt{direction:ltr;text-align:left}

.logo-preview-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px;border:1px dashed var(--border);border-radius:14px;background:#f8fbff}
.logo-preview{max-width:160px;max-height:90px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--border);padding:8px}

/* V37 receipt layout fix */
.receipt.print-area{
  font-family:inherit;
  font-size:inherit;
  line-height:normal;
  white-space:normal;
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  overflow-x:hidden;
}

.receipt-card *{box-sizing:border-box}
.receipt-logo-wrap{text-align:center;margin-bottom:8px}

.receipt-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:12.5px;
}
.receipt-table col.col-product{width:56%}
.receipt-table col.col-qty{width:14%}
.receipt-table col.col-price{width:30%}
.receipt-table th,.receipt-table td{
  border-bottom:1px solid #e5e7eb;
  padding:7px 6px;
  vertical-align:top;
}
.receipt-table th{
  background:#f3f6fb;
  color:#0f172a;
  font-weight:800;
}
.receipt-table td:first-child,.receipt-table th:first-child{
  word-break:break-word;
  overflow-wrap:anywhere;
}
.receipt-table td:nth-child(2), .receipt-table th:nth-child(2){
  text-align:center;
  white-space:nowrap;
}
.receipt-table td:nth-child(3), .receipt-table th:nth-child(3){
  text-align:right;
  white-space:nowrap;
}
.receipt-price-main{font-weight:700}
.receipt-price-sub{font-size:11px;color:#64748b;margin-top:2px;white-space:normal}

.receipt-totals>div span{flex:1}
.receipt-totals>div b{text-align:right;white-space:nowrap}

.urdu-mode .receipt-head, .urdu-mode .receipt-meta, .urdu-mode .receipt-thanks{text-align:center}
.urdu-mode .receipt-table td:first-child,.urdu-mode .receipt-table th:first-child{text-align:right}
.urdu-mode .receipt-table td:nth-child(2), .urdu-mode .receipt-table th:nth-child(2){text-align:center}
.urdu-mode .receipt-table td:nth-child(3), .urdu-mode .receipt-table th:nth-child(3){text-align:left}

/* V39 compact thermal receipt */
.receipt-card{width:100%;max-width:340px;margin:0 auto;padding:12px 10px;border-radius:12px;box-sizing:border-box;color:#111;background:#fff;overflow:hidden}
.receipt-card *{box-sizing:border-box}
.receipt-logo{max-width:120px;max-height:52px;width:auto;height:auto;object-fit:contain;display:inline-block}
.receipt-head{text-align:center;margin-bottom:8px;padding-bottom:10px;border-bottom:1px dashed #999}
.receipt-shop-name{font-size:23px;font-weight:800;margin-bottom:3px;line-height:1.25;word-break:break-word;letter-spacing:.01em}
.receipt-head div{line-height:1.35;font-size:13px;color:#333}
.receipt-meta{padding:8px 0;margin:0 0 8px;font-size:12.5px}
.receipt-meta div{margin-bottom:3px;color:#1a1a1a}
.receipt-meta b{font-weight:700}
.receipt-scroll{width:100%;overflow:hidden}
.receipt-items{border-top:1px dashed #999;border-bottom:1px dashed #999;padding:4px 0;margin:4px 0 8px}
.receipt-item-head,.receipt-item-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.receipt-item-head{font-size:13px;font-weight:800;color:#0f172a;letter-spacing:.01em;padding:3px 0 6px;border-bottom:1px solid #ddd;margin-bottom:6px}
.receipt-item-row{padding:7px 0;border-bottom:1px solid #f1f5f9}
.receipt-item-row:last-child{border-bottom:0}
.receipt-item-name{font-weight:700;font-size:14.5px;line-height:1.3;word-break:break-word;overflow-wrap:anywhere}
.receipt-item-meta{font-size:12px;color:#64748b;margin-top:3px;line-height:1.3}
.receipt-item-amount{font-weight:800;font-size:14.5px;white-space:nowrap;text-align:right}
.receipt-totals{margin-top:8px;padding-top:7px;border-top:1px dashed #999}
.receipt-totals>div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:13px;color:#475569}
.receipt-totals>div b{color:#111}
.receipt-due span,.receipt-due b{color:#b42318 !important;font-weight:800 !important}.receipt-change span,.receipt-change b{color:#047857!important;font-weight:900!important}
.receipt-payment-val{font-weight:400 !important}
.receipt-thanks{text-align:center;margin-top:10px;font-size:15px;font-weight:700;padding-top:8px;border-top:1px dashed #999;word-break:break-word}
.urdu-mode .receipt-item-head{direction:rtl}
.urdu-mode .receipt-item-name,.urdu-mode .receipt-item-meta{text-align:right}
.urdu-mode .receipt-item-amount{text-align:left}
.urdu-mode .receipt-meta div{text-align:right}

/* A5 portrait wholesale invoice */
.a5-invoice{width:100%;max-width:480px;margin:0 auto;background:#fff;color:#111;font-family:Arial,sans-serif;padding:16px;box-sizing:border-box;border:1px solid #d0d0d0}
.a5-invoice *{box-sizing:border-box}
.a5-logo-wrap{text-align:center;margin-bottom:6px}
.a5-logo{max-height:60px;max-width:180px;object-fit:contain}
.a5-head{text-align:center;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:8px}
.a5-shop-name{font-size:22px;font-weight:900;letter-spacing:.02em}
.a5-shop-sub{font-size:11px;color:#333;margin-top:2px}
.a5-invoice table{width:100%;border-collapse:collapse}
.a5-meta td{font-size:12px;padding:3px 2px;vertical-align:top}
.a5-items{margin-top:10px;border:1px solid #111}
.a5-section-label{font-size:12.5px;font-weight:800;color:#1a1a1a;margin:14px 0 6px;padding-left:8px;border-left:3px solid #111;text-transform:uppercase;letter-spacing:.03em}
.a5-items th,.a5-items td{border:1px solid #111;padding:5px 6px;font-size:11.5px}
.a5-sub{color:#555;font-size:10.5px}
.a5-items th{background:#f1f1f1;font-weight:800;text-align:center}
.a5-items tfoot td{font-weight:800;background:#fafafa}
.a5-c{text-align:center}
.a5-l{text-align:left}
.a5-r{text-align:right}
.a5-totals{margin-top:8px;max-width:65%;margin-left:auto}
.a5-totals td{font-size:12px;padding:2px 4px}
.a5-net td{font-weight:900;border-top:1px solid #111;font-size:13.5px;padding-top:5px}
.a5-foot{margin-top:16px;font-size:11px}
.a5-foot td{padding:6px 2px}
.a5-sign{display:flex;justify-content:space-between;margin-top:36px;font-size:11px}
.a5-sign>div{border-top:1px solid #111;padding-top:4px;width:45%;text-align:center}
.a5-thanks{text-align:center;margin-top:18px;font-weight:700;font-size:13px}
.a5-voucher-title{text-align:center;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin:2px 0 12px;color:#333}
.a5-note{font-size:12px;margin:8px 0;padding:8px;background:#f8f9fb;border:1px solid #e5e7eb;border-radius:6px}
.urdu-mode .a5-invoice{direction:ltr;text-align:left}


/* ============================================================
   NOVISTIC PHASE 9 — PROFESSIONAL CLOUD UI FOUNDATION
   ============================================================ */
:root{
  --bg:#070b17;
  --panel:#0d1426;
  --panel-2:#101a31;
  --text:#eef3ff;
  --muted:#8794b2;
  --brand:#695cff;
  --brand2:#7b4dff;
  --brand3:#20c8ff;
  --success:#25d39a;
  --warning:#ffb44b;
  --danger:#ff627d;
  --line:rgba(151,166,205,.14);
  --soft:rgba(105,92,255,.10);
  --shadow:0 18px 55px rgba(0,0,0,.24);
  --shadow-sm:0 10px 32px rgba(0,0,0,.18);
}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 76% -10%,rgba(105,92,255,.16),transparent 32%),
    radial-gradient(circle at 12% 0%,rgba(32,200,255,.07),transparent 25%),
    #070b17;
}
::-webkit-scrollbar-track{background:#080d1a}
::-webkit-scrollbar-thumb{background:#29344f}
::-webkit-scrollbar-thumb:hover{background:#3a496d}
.app{grid-template-columns:248px minmax(0,1fr);background:transparent}
.sidebar{
  padding:18px 14px;
  background:
    radial-gradient(circle at 20% 0%,rgba(105,92,255,.16),transparent 24%),
    linear-gradient(180deg,#090e1d 0%,#0a1020 62%,#090d19 100%);
  border-right:1px solid rgba(144,156,190,.11);
  box-shadow:none;
}
.sidebar .brand{margin:2px 4px 22px;padding:6px 6px 14px;border-bottom:1px solid rgba(145,158,194,.10)}
.sidebar-brand-full{max-width:176px!important;max-height:58px!important;object-fit:contain!important}
.nv-sidebar-label{
  padding:11px 12px 5px;color:#66728e;font-size:10px;font-weight:900;
  text-transform:uppercase;letter-spacing:.16em
}
.nav button{
  display:flex;align-items:center;gap:11px;
  color:#8f9bb7;border:1px solid transparent;padding:11px 12px;
  margin:3px 0;border-radius:12px;font-size:13px;font-weight:750
}
.nav button:hover{background:rgba(105,92,255,.08);color:#dce5ff;border-color:rgba(105,92,255,.10);transform:none}
.nav button.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(105,92,255,.20),rgba(32,200,255,.06));
  border-color:rgba(123,77,255,.25);
  box-shadow:inset 0 0 24px rgba(105,92,255,.06)
}
.nav button.active::before{background:linear-gradient(180deg,#8f68ff,#24c9ff);width:3px;left:-1px}
.nv-nav-icon{width:20px;text-align:center;font-size:16px;filter:saturate(.85)}
.nav .role-note{
  margin:16px 3px 8px;padding:12px;background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.06);color:#71809e
}
.main{padding:16px 20px 34px;background:transparent}
.topbar{
  min-height:74px;margin-bottom:18px;padding:12px 14px 12px 18px;
  background:rgba(10,16,31,.78);
  border:1px solid rgba(144,156,190,.12);
  border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.14);
  backdrop-filter:blur(16px)
}
.topbar h2{font-size:23px;color:#f4f7ff;margin:0 0 3px}
.topbar .sub{color:#73809e}
.nv-top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.nv-branch-select{
  min-width:168px;height:40px!important;padding:0 34px 0 12px!important;
  border-radius:11px!important;background:#0c1428!important;color:#dce5ff!important;
  border:1px solid rgba(142,156,194,.16)!important;font-weight:750!important
}
.nv-plan-pill,.nv-scope-pill{
  height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;
  border-radius:11px;border:1px solid rgba(123,77,255,.24);
  background:rgba(105,92,255,.10);color:#c9c1ff;font-size:12px;font-weight:800;white-space:nowrap
}
.nv-plan-dot{width:7px;height:7px;border-radius:50%;background:#25d39a;box-shadow:0 0 12px rgba(37,211,154,.55)}
.user-chip{
  height:44px;background:#0d162a;border-color:rgba(146,160,194,.14);
  box-shadow:none;color:#eaf0ff;padding:5px 10px 5px 6px
}
.user-chip small{color:#7f8ba8}
.avatar{
  background:linear-gradient(135deg,#695cff,#20c8ff);color:white;
  width:32px;height:32px;box-shadow:0 6px 18px rgba(105,92,255,.25)
}
.nv-overview{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:5px 2px 14px
}
.nv-overview h1{font-size:24px;margin:0 0 4px;letter-spacing:-.03em}
.nv-overview p{margin:0;color:#74819e;font-size:13px}
.nv-overview-badge{
  display:flex;gap:8px;align-items:center;color:#8b97b2;font-size:12px;
  padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.025);
  border:1px solid rgba(145,158,194,.09)
}
.card,.panel,.chart-card,.reminder-card,.calendar-day,.modal-card{
  color:var(--text);background:
    linear-gradient(180deg,rgba(18,28,52,.94),rgba(12,19,37,.96));
  border:1px solid rgba(145,158,194,.12);box-shadow:var(--shadow-sm);
  border-radius:16px
}
.card{padding:17px}
.card::before{height:2px;background:linear-gradient(90deg,#6f5cff,#1ec9ff);opacity:.72}
.card:hover,.panel:hover,.chart-card:hover,.reminder-card:hover,.calendar-day:hover,.modal-card:hover{
  transform:none;border-color:rgba(123,77,255,.23);box-shadow:0 16px 42px rgba(0,0,0,.20)
}
.card-title{color:#7b88a6;font-size:10px;letter-spacing:.13em}
.card-value{font-size:27px;color:#f1f5ff}
.card-foot,.sub{color:#7d8aa7!important}
.panel h3{color:#edf2ff}
.kpi-item,.total-box{background:#0b1428;border-color:rgba(143,157,190,.12);color:#dce4f7}
.table-wrap{background:#0b1325;border-color:rgba(143,157,190,.12);box-shadow:none}
table{color:#dce4f7}
th{background:#0e182d!important;color:#7f8ca8!important;border-color:rgba(143,157,190,.10)!important}
td{border-color:rgba(143,157,190,.09)!important}
tbody tr:hover{background:rgba(105,92,255,.055)}
input,select,textarea{
  background:#0a1326!important;color:#eaf0ff!important;
  border-color:rgba(143,157,190,.15)!important
}
input::placeholder,textarea::placeholder{color:#53617f}
input:focus,select:focus,textarea:focus{
  border-color:rgba(105,92,255,.55)!important;box-shadow:0 0 0 3px rgba(105,92,255,.11)!important
}
.btn{border-radius:10px!important;background:linear-gradient(135deg,#695cff,#7655f8)!important;box-shadow:0 8px 20px rgba(105,92,255,.18)!important}
.btn.secondary{background:#111c33!important;color:#dce5ff!important;border-color:rgba(144,158,194,.14)!important;box-shadow:none!important}
.btn.ghost{background:transparent!important;color:#a9b5cf!important;border-color:rgba(144,158,194,.14)!important;box-shadow:none!important}
.btn.success{background:linear-gradient(135deg,#13b985,#24d7a1)!important;color:#041610!important}
.tab{background:#0c162a;color:#8e9ab5;border-color:rgba(143,157,190,.13)}
.tab.active{background:rgba(105,92,255,.18);color:#fff;border-color:rgba(105,92,255,.30)}
.alert.info{background:rgba(32,200,255,.07);color:#8ddfff;border-color:rgba(32,200,255,.15)}
.alert.warn{background:rgba(255,180,75,.08);color:#ffd08b;border-color:rgba(255,180,75,.16)}
.alert.danger{background:rgba(255,98,125,.08);color:#ff9caf;border-color:rgba(255,98,125,.17)}
.modal{background:rgba(3,6,14,.76)}
.close{background:#121b2e;color:#dce5ff}
.nv-branch-loading{opacity:.62;pointer-events:none}
@media(max-width:980px){
  .app{grid-template-columns:82px minmax(0,1fr)}
  .sidebar{padding:14px 9px}
  .sidebar-brand-full{max-width:58px!important}
  .nav button{justify-content:center;font-size:0;padding:12px 8px}
  .nv-nav-icon{font-size:18px}
  .nav .role-note,.nv-sidebar-label{display:none}
  .topbar{align-items:flex-start}
  .nv-plan-pill{display:none}
}
@media(max-width:720px){
  .app{display:block}
  .sidebar{position:relative;height:auto;overflow:visible}
  .sidebar .brand{justify-content:center}
  .nav{display:flex;gap:5px;overflow:auto;padding-bottom:4px}
  .nav button{min-width:48px;margin:0}
  .nav .role-note{display:none}
  .main{padding:12px}
  .topbar{display:block}
  .nv-top-actions{justify-content:flex-start;margin-top:10px}
  .nv-branch-select{min-width:150px;max-width:220px}
  .user-chip{margin-left:auto}
  .nv-overview{display:block}
  .nv-overview-badge{margin-top:10px;width:max-content}
}



/* ============================================================
   NOVISTIC PHASE 10 — LOCKED PREMIUM UI TARGET
   Reference: approved Novistic Login + Dashboard screenshots
   ============================================================ */
:root{
  --p10-bg:#05091a;
  --p10-bg2:#071024;
  --p10-sidebar:#0a1127;
  --p10-card:#0d1632;
  --p10-card2:#101a3a;
  --p10-line:#22315c;
  --p10-line-soft:rgba(104,126,190,.20);
  --p10-text:#f4f7ff;
  --p10-muted:#8998bd;
  --p10-muted2:#627197;
  --p10-purple:#6b47ff;
  --p10-violet:#8e45ff;
  --p10-blue:#3e8cff;
  --p10-cyan:#37d4ff;
  --p10-green:#2bd99f;
  --p10-orange:#ff9b3f;
  --p10-red:#ff5e78;
}
*{box-sizing:border-box}
html,body,#root{min-height:100%;background:var(--p10-bg)}
body{
  margin:0;color:var(--p10-text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 45% -10%,rgba(68,76,194,.13),transparent 28%),
    radial-gradient(circle at 95% 18%,rgba(30,88,190,.08),transparent 27%),
    linear-gradient(145deg,#050819,#05091a 45%,#061028);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(77,94,151,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(77,94,151,.12) 1px,transparent 1px);
  background-size:74px 74px;mask-image:linear-gradient(to bottom,black,transparent 88%);
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#070c1f}
::-webkit-scrollbar-thumb{background:#26345d;border-radius:20px}

/* ---------- AUTH ---------- */
.nv-cloud-auth{
  min-height:100vh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(520px,.88fr);
  background:
    radial-gradient(circle at 20% 22%,rgba(89,71,255,.17),transparent 28%),
    radial-gradient(circle at 65% 58%,rgba(44,145,255,.09),transparent 28%),
    linear-gradient(135deg,#05091a,#070b1e 48%,#061028);
  color:var(--p10-text);overflow:hidden;position:relative
}
.nv-cloud-auth:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.33;
  background-image:linear-gradient(rgba(66,87,150,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(66,87,150,.11) 1px,transparent 1px);
  background-size:78px 78px;mask-image:linear-gradient(to right,black,transparent 70%)
}
.nv-auth-brand{
  position:relative;z-index:1;padding:54px clamp(56px,8vw,170px);
  display:flex;flex-direction:column;justify-content:center
}
.nv-auth-logo-row{display:flex;align-items:center;gap:28px;margin-bottom:48px}
.nv-auth-logo{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(91,77,255,.34))}
.nv-auth-brandname{font-size:34px;letter-spacing:11px;font-weight:650;line-height:1;color:#f6f7ff}
.nv-auth-subbrand{font-size:16px;letter-spacing:10px;color:#8da5ff;margin-top:11px;font-weight:650}
.nv-auth-kicker{display:none!important}
.nv-auth-title{font-size:clamp(42px,4.2vw,64px);line-height:1.04;letter-spacing:-2px;margin:0 0 24px;font-weight:800}
.nv-gradient-text{
  background:linear-gradient(90deg,#9b59ff 2%,#8278ff 48%,#42d9ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.nv-auth-copy{max-width:690px;color:#9aa6c5;font-size:17px;line-height:1.62;margin:0 0 30px}
.nv-features{display:grid;gap:17px;max-width:690px}
.nv-feature{display:grid;grid-template-columns:52px 1fr;gap:17px;align-items:center}
.nv-feature-icon{
  width:52px;height:52px;border:1px solid #29365f;border-radius:13px;display:grid;place-items:center;
  color:#9d73ff;background:linear-gradient(150deg,rgba(91,69,255,.14),rgba(10,18,43,.72));font-size:22px
}
.nv-feature b{display:block;font-size:16px;color:#f0f3ff;margin-bottom:3px}
.nv-feature span{display:block;color:#8794b4;font-size:13px}
.nv-trust{
  max-width:720px;margin-top:28px;padding:18px 22px;border:1px solid #1f2d52;border-radius:14px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:rgba(10,17,40,.60);
  color:#7584a8;font-size:11px
}
.nv-trust span{padding:0 22px;border-right:1px solid #1d294b}
.nv-trust span:first-child{padding-left:0}.nv-trust span:last-child{border-right:0}
.nv-trust b{display:block;color:#eef2ff;font-size:12px;margin-bottom:3px}
.nv-auth-side{min-height:100vh;display:grid;place-items:center;padding:42px 70px 42px 20px;position:relative;z-index:2}
.nv-auth-card{
  width:min(100%,590px);padding:54px 56px 48px;border-radius:26px;
  background:linear-gradient(160deg,rgba(13,21,48,.98),rgba(7,13,32,.985));
  border:3px solid rgba(51,64,108,.76);
  box-shadow:0 35px 100px rgba(0,0,0,.38),0 0 80px rgba(82,63,230,.06)
}
.nv-auth-card h1{font-size:39px;letter-spacing:-1.2px;margin:0 0 8px}
.nv-auth-card .lead{color:#9ba7c5;font-size:16px;margin-bottom:38px}
.nv-field{margin-bottom:25px}.nv-field label{color:#c5cde2;font-size:14px;margin-bottom:10px}
.nv-input-wrap input{
  height:59px;background:#091129!important;border:1px solid #344163!important;border-radius:11px!important;
  color:#f3f6ff!important;font-size:15px!important;padding-left:49px!important
}
.nv-input-wrap .nv-icon{left:17px;color:#a3afcd}.nv-eye{right:14px}
.nv-auth-row{font-size:14px;margin:1px 0 29px;color:#bbc4da}
.nv-check input{width:19px;height:19px;accent-color:#7654ff}
.nv-link{color:#a15fff}
.nv-btn{height:59px;border-radius:10px;font-size:16px;background:linear-gradient(90deg,#5934ff,#8a40ff 54%,#38aaff)}
.nv-btn.secondary{background:transparent!important;border:1px solid #5b56b6!important;color:#f5f6ff!important;box-shadow:none!important}
.nv-or{margin:25px 0;color:#7a86a4}
.nv-auth-support{font-size:14px;margin-top:28px;color:#9aa5bf}
.nv-auth-alert{border-radius:10px}
@media(max-width:1050px){
  .nv-cloud-auth{grid-template-columns:1fr}.nv-auth-brand{display:none}.nv-auth-side{padding:24px}.nv-auth-card{max-width:600px}
}

/* ---------- APP SHELL ---------- */
.app.p10-app{
  min-height:100vh;display:grid;grid-template-columns:236px minmax(0,1fr);
  background:transparent;color:var(--p10-text)
}
.p10-sidebar{
  position:sticky;top:0;height:100vh;padding:18px 15px 16px;
  background:linear-gradient(180deg,rgba(12,20,47,.98),rgba(7,14,34,.99));
  border-right:1px solid #1b2950;display:flex;flex-direction:column;z-index:20
}
.p10-brand{
  min-height:88px;border:1px solid #22325c;border-radius:14px;padding:15px 14px;
  display:flex;align-items:center;gap:11px;background:linear-gradient(145deg,rgba(17,29,66,.88),rgba(9,17,40,.88));
  box-shadow:inset 0 0 30px rgba(82,67,255,.04)
}
.p10-brand img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(86,78,255,.28))}
.p10-brand-name{font-size:13px;letter-spacing:4px;font-weight:800;color:#f4f6ff;white-space:nowrap}
.p10-brand-sub{font-size:8px;letter-spacing:4px;color:#8da2ff;margin-top:5px;font-weight:800}
.p10-menu{margin-top:22px;overflow:auto;padding-right:2px;flex:1}
.p10-group-label{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#526186;font-weight:900;padding:12px 11px 5px}
.p10-nav{
  width:100%;height:45px;border:1px solid transparent;border-radius:9px;background:transparent;color:#99a7c7;
  display:flex;align-items:center;gap:12px;padding:0 12px;margin:3px 0;text-align:left;font-size:13px;font-weight:650;cursor:pointer
}
.p10-nav:hover{color:#edf2ff;background:rgba(73,80,166,.11)}
.p10-nav.active{
  color:#fff;background:linear-gradient(90deg,#4b36c8,#5d46dc);border-color:#6f59ff;
  box-shadow:0 8px 24px rgba(83,65,225,.18),inset 0 0 20px rgba(255,255,255,.03)
}
.p10-nav svg{width:19px;height:19px;stroke-width:1.7;flex:0 0 auto}
.p10-plan-card{
  margin-top:14px;border:1px solid #26345b;border-radius:13px;padding:15px;background:linear-gradient(160deg,#0f1937,#0a132c);
  box-shadow:0 12px 34px rgba(0,0,0,.16)
}
.p10-plan-label{font-size:10px;color:#7180a4}.p10-plan-name{color:#42e0ff;font-size:14px;font-weight:800;margin:5px 0}
.p10-plan-meta{font-size:10px;color:#7583a5;line-height:1.5}
.p10-plan-btn{
  width:100%;height:37px;margin-top:13px;border:1px solid #6f57ff;border-radius:8px;color:white;font-weight:800;font-size:11px;
  background:linear-gradient(90deg,#4f39dd,#8b35ed);cursor:pointer
}
.p10-main{min-width:0;padding:18px 20px 30px}
.p10-topbar{
  height:68px;display:grid;grid-template-columns:230px minmax(260px,405px) 1fr;gap:18px;align-items:center;
  padding-bottom:16px;border-bottom:1px solid rgba(94,112,165,.15);margin-bottom:18px
}
.p10-branch-wrap{position:relative}
.p10-branch{
  width:100%;height:52px;border:1px solid #25345d!important;border-radius:11px!important;
  background:#0c1530!important;color:#f2f5ff!important;font-size:13px!important;font-weight:750!important;
  padding:0 40px 0 42px!important;appearance:auto
}
.p10-branch-icon{position:absolute;left:13px;top:16px;width:20px;color:#9b62ff;pointer-events:none}
.p10-search{position:relative}
.p10-search input{
  width:100%;height:52px!important;border:1px solid #243357!important;border-radius:11px!important;background:#0a132b!important;
  color:#dce4fa!important;padding:0 48px 0 43px!important;font-size:13px!important
}
.p10-search svg{position:absolute;left:15px;top:17px;width:18px;color:#7f8caf}
.p10-search-kbd{position:absolute;right:12px;top:12px;border:1px solid #243254;border-radius:7px;padding:6px 8px;color:#6f7c9d;font-size:10px}
.p10-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.p10-icon-btn{
  position:relative;width:49px;height:49px;border:1px solid #24345b;border-radius:11px;background:#0c1530;color:#aeb9d4;display:grid;place-items:center;cursor:pointer
}
.p10-icon-btn svg{width:20px}.p10-badge{
  position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;border-radius:9px;background:#8d48ff;color:#fff;border:2px solid #091126;
  display:grid;place-items:center;font-size:9px;font-weight:900;padding:0 4px
}
.p10-online{
  height:49px;padding:0 15px;border:1px solid #24345b;border-radius:11px;background:#0c1530;color:#c5cee3;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit
}
.p10-online:hover{border-color:#394b78}.p10-online:disabled{cursor:default;opacity:.9}
.p10-online-dot{width:8px;height:8px;border-radius:50%;background:#25dca0;box-shadow:0 0 12px rgba(37,220,160,.65)}
.p10-online.offline{border-color:#7c4a29;color:#ffd2a3;background:#1b1520}.p10-online.offline .p10-online-dot{background:#ff914d;box-shadow:0 0 12px rgba(255,145,77,.65)}
.p10-online.syncing{border-color:#6e632c;color:#ffe88a}.p10-online.syncing .p10-online-dot{background:#ffd84a;box-shadow:0 0 12px rgba(255,216,74,.6)}
.p10-online.warning{border-color:#813f51;color:#ffb1bf}.p10-online.warning .p10-online-dot{background:#ff637e;box-shadow:0 0 12px rgba(255,99,126,.6)}
.p10-online.pending{border-color:#3d5f8b;color:#bcdcff}.p10-online.pending .p10-online-dot{background:#69a9ff;box-shadow:0 0 12px rgba(105,169,255,.6)}
@media(max-width:1100px){.p10-online.offline,.p10-online.syncing,.p10-online.warning,.p10-online.pending{display:flex!important}}
.p10-profile{
  min-width:184px;height:52px;border:1px solid #26365f;border-radius:11px;background:#0c1530;padding:5px 11px 5px 6px;
  display:grid;grid-template-columns:36px 1fr 14px;align-items:center;gap:9px;color:#f4f6ff;cursor:pointer
}
.p10-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5c44dd,#35a9de);font-size:13px;font-weight:900}
.p10-profile b{font-size:12px}.p10-profile small{display:block;font-size:9px;color:#8491b0;margin-top:2px}
.p10-profile svg{width:14px;color:#7986a6}

/* ---------- DASHBOARD ---------- */
.p10-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:2px 0 17px}
.p10-page-head h1{font-size:22px;letter-spacing:-.45px;margin:0 0 5px}.p10-page-head p{font-size:12px;color:#8390ae;margin:0}
.p10-date{
  min-width:145px;height:40px;border:1px solid #2a3a61;border-radius:10px;background:#0c1530;color:#e5eaf7;padding:0 12px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:9px
}
.p10-date svg{width:16px;color:#9aa7c8}
.p10-layout{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:16px}
.p10-center{min-width:0}.p10-right{display:grid;gap:14px;align-content:start}
.p10-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:13px}
.p10-kpi{
  min-height:104px;border:1px solid #25355d;border-radius:13px;background:linear-gradient(145deg,#0f1938,#0a142f);
  padding:15px 16px;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.13)
}
.p10-kpi-icon{width:48px;height:48px;border-radius:11px;display:grid;place-items:center;border:1px solid currentColor;background:rgba(255,255,255,.025)}
.p10-kpi-icon svg{width:23px}.p10-cyan{color:#30d4ee}.p10-purple{color:#ae45ff}.p10-green{color:#35df9d}.p10-red{color:#ff755d}
.p10-kpi-label{font-size:9px;text-transform:uppercase;color:#8190b4;letter-spacing:.04em}
.p10-kpi-value{font-size:21px;font-weight:800;color:#f5f7ff;margin:5px 0 4px;letter-spacing:-.4px}
.p10-kpi-foot{font-size:9px;color:#667698;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p10-positive{color:#32d79a}.p10-negative{color:#ff697f}
.p10-dashboard-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-bottom:13px}
.p10-card{
  border:1px solid #24345d;border-radius:13px;background:linear-gradient(145deg,#0d1734,#09132c);
  box-shadow:0 12px 32px rgba(0,0,0,.13)
}
.p10-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px 0}
.p10-card-head h3{font-size:13px;margin:0;color:#f1f4ff}.p10-card-head .meta{font-size:10px;color:#7b89aa}
.p10-sales-total{font-size:22px;font-weight:800;padding:7px 16px 0}
.p10-chart{height:172px;padding:15px 18px 14px;display:flex;align-items:flex-end;gap:14px;border-radius:0 0 13px 13px}
.p10-bar-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.p10-bar{
  width:min(34px,70%);min-height:5px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4fd3ff,#586dff 55%,#842bdf);
  box-shadow:0 0 18px rgba(92,82,255,.17);position:relative
}
.p10-bar:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.09),transparent)}
.p10-bar-label{font-size:9px;color:#7785a6}
.p10-donut-body{min-height:221px;padding:15px 17px 18px;display:grid;grid-template-columns:148px 1fr;align-items:center;gap:15px}
.p10-donut{width:132px;height:132px;border-radius:50%;position:relative;margin:auto;box-shadow:0 0 28px rgba(79,70,255,.15)}
.p10-donut:after{content:"";position:absolute;inset:28px;border-radius:50%;background:#0c1630;border:1px solid #202f54}
.p10-donut-center{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;font-size:9px;color:#8492b3;pointer-events:none}
.p10-donut-center b{display:block;font-size:14px;color:#f3f5ff;margin-top:2px}
.p10-legend{display:grid;gap:10px}
.p10-legend-row{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;font-size:10px;color:#9eabc8}
.p10-legend-dot{width:8px;height:8px;border-radius:50%}.p10-legend-row b{font-size:11px;color:#f0f3ff;font-weight:750}
.p10-invoices{overflow:hidden}.p10-table-wrap{overflow:auto}
.p10-table{width:100%;border-collapse:collapse;font-size:10px}.p10-table th{text-align:left;color:#7180a1;text-transform:uppercase;letter-spacing:.04em;font-size:8px;font-weight:800;padding:12px 15px;background:#0b1530!important}
.p10-table td{padding:11px 15px;border-top:1px solid rgba(91,111,169,.15);color:#b8c3dd;white-space:nowrap}
.p10-table td b{color:#e8edfb}.p10-status{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;border:1px solid #2e9c76;color:#3ee2a3;font-size:8px}
.p10-status.pending{border-color:#b36d28;color:#ffac4e}.p10-payment{display:flex;align-items:center;gap:6px}.p10-payment svg{width:13px;color:#8795b8}
.p10-more{color:#687798;letter-spacing:2px}

/* right rail */
.p10-side-card{padding:15px 15px 14px}.p10-side-card h3{font-size:13px;margin:0 0 14px}
.p10-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.p10-quick{
  min-height:73px;border:1px solid #25345c;border-radius:10px;background:#0e1834;color:#d9e0f1;display:grid;place-items:center;text-align:center;gap:5px;padding:10px 6px;font-size:10px;font-weight:700;cursor:pointer
}
.p10-quick:hover{border-color:#694cff;background:#121d3c}.p10-quick.primary{background:linear-gradient(145deg,#49269d,#5528c3);border-color:#6638d9}
.p10-quick svg{width:23px;color:#b56cff}.p10-quick.primary svg{color:#e48bff}
.p10-terminal{
  width:100%;height:43px;margin-top:10px;border:1px solid #423b91;border-radius:9px;background:linear-gradient(90deg,#24206f,#302373);
  color:#e7eaff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:space-between;padding:0 13px;cursor:pointer
}
.p10-alert-list{display:grid;gap:11px}.p10-alert-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center}
.p10-product-thumb{width:38px;height:38px;border-radius:8px;background:linear-gradient(145deg,#222d4e,#131d38);display:grid;place-items:center;color:#8a9abc}
.p10-product-thumb svg{width:19px}.p10-alert-item b{display:block;font-size:10px;color:#e5eaf8}.p10-alert-item small{font-size:8px;color:#6f7d9c}
.p10-stock-pill{font-size:8px;padding:4px 7px;border:1px solid #ce495f;color:#ff6c83;border-radius:7px;white-space:nowrap}
.p10-stock-pill.warn{border-color:#bd7128;color:#ffad50}
.p10-branch-list{display:grid;gap:9px}.p10-branch-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.p10-branch-row b{font-size:10px}.p10-branch-row span{font-size:9px;color:#7583a4}.p10-branch-meter{height:5px;background:#17223f;border-radius:9px;overflow:hidden;margin-top:5px}.p10-branch-meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#6551ff,#38cdfd)}
.p10-empty{padding:22px;text-align:center;color:#7180a3;font-size:11px}

/* ---------- LEGACY MODULES, SAME DESIGN LANGUAGE ---------- */
.p10-main .panel,.p10-main .card,.p10-main .chart-card,.p10-main .reminder-card,.p10-main .calendar-day,.modal-card{
  background:linear-gradient(145deg,#0d1734,#09132c)!important;border:1px solid #24345d!important;border-radius:13px!important;
  color:#eaf0ff!important;box-shadow:0 12px 32px rgba(0,0,0,.13)!important
}
.p10-main .panel{padding:17px!important}.p10-main .panel h3{font-size:15px!important;color:#f3f5ff!important}
.p10-main input,.p10-main select,.p10-main textarea,.modal-card input,.modal-card select,.modal-card textarea{
  background:#0a142d!important;border:1px solid #29395f!important;color:#eef2ff!important;border-radius:9px!important
}
.p10-main input:focus,.p10-main select:focus,.p10-main textarea:focus{border-color:#6c50ff!important;box-shadow:0 0 0 3px rgba(108,80,255,.10)!important}
.p10-main .btn,.modal-card .btn{border-radius:8px!important;font-size:11px!important;background:linear-gradient(90deg,#573fe4,#7a42ee)!important;box-shadow:none!important}
.p10-main .btn.secondary,.modal-card .btn.secondary{background:#111c3a!important;border:1px solid #2b3a61!important;color:#dce4f7!important}
.p10-main .btn.ghost{background:transparent!important;border:1px solid #2b3a61!important;color:#9aa8c6!important}
.p10-main .table-wrap{border:1px solid #24345d!important;border-radius:11px!important;background:#09132c!important}
.p10-main table th{background:#0b1530!important;color:#7886a7!important;font-size:10px!important}
.p10-main table td{border-color:rgba(91,111,169,.15)!important;color:#bac5de!important}
.p10-main tbody tr:hover{background:rgba(83,68,188,.08)!important}
.p10-main .badge{border-radius:7px!important}.p10-main .toolbar{gap:12px!important}
.p10-main .sub{color:#7e8bab!important}

@media(max-width:1220px){
  .p10-layout{grid-template-columns:1fr}.p10-right{grid-template-columns:repeat(3,1fr)}
  .p10-topbar{grid-template-columns:210px minmax(220px,1fr) auto}.p10-online{display:none}.p10-profile{min-width:150px}
}
@media(max-width:980px){
  .app.p10-app{grid-template-columns:80px minmax(0,1fr)}
  .p10-sidebar{padding:14px 9px}.p10-brand{padding:10px;justify-content:center}.p10-brand img{width:48px;height:48px}.p10-brand-name,.p10-brand-sub{display:none}
  .p10-nav{justify-content:center;padding:0;font-size:0}.p10-nav svg{width:20px}.p10-group-label,.p10-plan-card{display:none}
  .p10-topbar{grid-template-columns:180px 1fr auto}.p10-profile{min-width:50px;width:50px;grid-template-columns:36px;padding:6px}.p10-profile>div:nth-child(2),.p10-profile>svg{display:none}
  .p10-kpis{grid-template-columns:1fr 1fr}.p10-dashboard-grid{grid-template-columns:1fr}.p10-right{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .app.p10-app{display:block}.p10-sidebar{position:relative;height:auto;display:block}.p10-brand{display:none}.p10-menu{display:flex;overflow:auto;margin:0}.p10-group-label,.p10-plan-card{display:none}
  .p10-nav{min-width:54px;height:45px;margin:0 3px}.p10-main{padding:12px}.p10-topbar{height:auto;grid-template-columns:1fr 1fr;gap:9px;padding-bottom:12px}.p10-search{grid-column:1/-1;grid-row:2}.p10-top-actions{gap:7px}.p10-online,.p10-icon-btn{display:none}
  .p10-kpis{grid-template-columns:1fr}.p10-layout{display:block}.p10-right{display:grid;grid-template-columns:1fr;margin-top:12px}.p10-dashboard-grid{grid-template-columns:1fr}.p10-donut-body{grid-template-columns:130px 1fr}
}


/* Phase 10 screenshot QA fixes */
.p10-table tbody tr td{background:#0b1530!important;color:#bac5de!important}
.p10-table tbody tr:nth-child(even) td{background:#0a142d!important}
.p10-table tbody tr:hover td{background:#111d3b!important}
.p10-terminal svg{width:16px!important;height:16px!important;flex:0 0 auto}
.p10-terminal{overflow:hidden}



/* ============================================================
   NOVISTIC PHASE 11 — PREMIUM POS TERMINAL
   Login remains the locked Phase 10 premium reference design.
   ============================================================ */
.p11-pos-shell{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(350px,.72fr);gap:16px;align-items:start}
.p11-pos-tabs{display:flex;gap:8px;margin-bottom:14px}
.p11-pos-tab{padding:9px 18px;border-radius:9px;border:1px solid #263457;background:#0c1630;color:#8e9bb9;font-size:11.5px;font-weight:750;cursor:pointer;display:flex;align-items:center;gap:6px}
.p11-pos-tab.active{background:#695cff;color:#fff;border-color:#695cff}
.p11-held-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.p11-held-card{background:#0c1630;border:1px solid #263457;border-radius:12px;padding:16px}
.p11-held-card h4{margin:0 0 4px;font-size:14px;color:#eef3ff}
.p11-held-card .sub{font-size:11.5px;color:#8e9bb9;margin-bottom:10px}
.p11-held-actions{display:flex;gap:8px;margin-top:12px}
.p11-pos-left,.p11-pos-right{min-width:0}.p11-pos-right{position:sticky;top:18px}
.p11-pos-card{border:1px solid #24345d;border-radius:14px;background:linear-gradient(145deg,#0d1734,#09132c);box-shadow:0 14px 38px rgba(0,0,0,.15);overflow:hidden}
.p11-pos-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 18px 14px;border-bottom:1px solid rgba(86,107,166,.16)}
.p11-pos-head h2,.p11-pos-head h3{margin:0;color:#f5f7ff}.p11-pos-head h2{font-size:19px}.p11-pos-head h3{font-size:14px}
.p11-pos-head p{margin:5px 0 0;color:#7483a6;font-size:10px;line-height:1.45}
.p11-branch-chip{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid #2b3c67;border-radius:8px;background:#0a142e;color:#9eabca;font-size:9px;font-weight:750;white-space:nowrap}
.p11-branch-chip svg{width:14px;color:#8c65ff}
.p11-scan-zone{padding:15px 17px;border-bottom:1px solid rgba(86,107,166,.13)}
.p11-scan-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 106px 122px;gap:8px}
.p11-input-icon{position:relative}.p11-input-icon>svg{position:absolute;left:13px;top:14px;width:17px;color:#7887aa;z-index:1}
.p11-input-icon input{height:45px!important;padding-left:39px!important}
.p11-scan-row input,.p11-product-tools input,.p11-product-tools select,.p11-field input,.p11-field select,.p11-field textarea{
  background:#09132c!important;border:1px solid #293960!important;color:#edf2ff!important;border-radius:9px!important;font-size:11px!important
}
.p11-scan-row .btn{height:45px!important;padding:0 10px!important;white-space:nowrap}
.p11-scan-msg{display:flex;align-items:center;gap:7px;margin-top:8px;color:#6f7e9f;font-size:9px}
.p11-scan-dot{width:6px;height:6px;border-radius:50%;background:#2bd99f;box-shadow:0 0 9px rgba(43,217,159,.55)}
.p11-product-tools{padding:14px 17px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.62fr) 74px 130px auto;gap:8px;align-items:center}
.p11-product-tools input,.p11-product-tools select{height:42px!important}.p11-product-tools .btn{height:42px!important}
.p11-meter-info{padding:0 17px 9px;color:#38c8ec;font-size:9px;min-height:20px}
.p11-product-strip{padding:6px 17px 15px;border-bottom:1px solid rgba(86,107,166,.13)}
.p11-product-strip-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.p11-product-strip-head b{font-size:10px;color:#cdd5e9}.p11-product-strip-head span{font-size:9px;color:#657596}
.p11-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:222px;overflow:auto;padding-right:3px}
.p11-product-tile{min-height:84px;border:1px solid #24345d;border-radius:10px;background:linear-gradient(145deg,#101a38,#0b1530);padding:10px;text-align:left;color:#edf2ff;cursor:pointer;transition:.14s ease;position:relative;overflow:hidden}
.p11-product-tile:hover{transform:translateY(-1px);border-color:#6650dc;background:#121e40}
.p11-product-tile:before{content:"";position:absolute;inset:0 auto auto 0;width:3px;height:100%;background:linear-gradient(#7b50ff,#2bcdf8);opacity:.55}
.p11-product-tile b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;padding-right:34px}
.p11-product-tile .p11-price{font-size:13px;font-weight:850;color:#fff}
.p11-product-tile small{display:block;color:#7180a3;font-size:8px;margin-top:4px}
.p11-product-tile .p11-stock{position:absolute;right:7px;top:7px;font-size:7px;padding:3px 5px;border-radius:6px;border:1px solid #2a8469;color:#35d99f;background:#0c2b28}
.p11-product-tile .p11-stock.low{border-color:#a95b35;color:#ff9c56;background:#2b1d1d}
.p11-cart-section{padding:14px 17px 17px}
.p11-cart-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.p11-cart-title h3{font-size:12px;margin:0}.p11-cart-title span{font-size:9px;color:#69799d}
.p11-cart-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;background:#6044da;color:#fff;font-size:8px;font-weight:900}
.p11-empty-cart{padding:34px 14px;text-align:center;border:1px dashed #293a62;border-radius:11px;background:#09122a;color:#7080a2}
.p11-empty-cart svg{width:32px;color:#55668f;margin-bottom:8px}.p11-empty-cart b{display:block;color:#b5c0da;font-size:11px;margin-bottom:4px}.p11-empty-cart span{font-size:9px}
.p11-cart-list{display:grid;gap:8px}
.p11-cart-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 94px 32px;gap:9px;align-items:center;border:1px solid #22335a;border-radius:10px;background:#0a142d;padding:10px 10px 10px 12px}
.p11-cart-product{min-width:0}.p11-cart-product b{display:block;font-size:10px;color:#edf2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p11-cart-product small{font-size:8px;color:#6f7e9f}.p11-cart-product .p11-cart-meta{margin-top:4px;color:#8290b0;font-size:8px}
.p11-cart-row input{width:100%;height:34px!important;text-align:center!important;background:#0d1834!important;border:1px solid #2b3b62!important;color:#fff!important;border-radius:7px!important}
.p11-line-total{text-align:right}.p11-line-total b{display:block;font-size:11px}.p11-line-total small{font-size:7px;color:#6b7a9b}
.p11-remove{width:30px;height:30px;border:1px solid #613149;border-radius:7px;background:#261427;color:#ff7189;display:grid;place-items:center;cursor:pointer}.p11-remove svg{width:14px}
.p11-open-rate{margin-top:8px;padding:10px;border:1px solid #725423;border-radius:9px;background:#231d13;color:#ffd184}
.p11-open-rate label{font-size:9px;font-weight:800}.p11-open-rate input{height:36px!important;margin-top:7px;background:#17150f!important;border-color:#8f6a2e!important;color:#fff!important}
.p11-right-body{padding:15px}
.p11-order-no{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #26375e;border-radius:9px;background:#0a142d;margin-bottom:13px}
.p11-order-no span{font-size:8px;color:#7180a3;text-transform:uppercase;letter-spacing:.08em}.p11-order-no b{font-size:10px;color:#d9e1f3}
.p11-section-label{font-size:9px;color:#7a89ab;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 7px}
.p11-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.p11-payment-grid .full{grid-column:1/-1}
.p11-field label{display:block;color:#8c9abb;font-size:8px;margin:0 0 5px}.p11-field input,.p11-field select{width:100%;height:39px!important}.p11-field textarea{width:100%;min-height:62px!important;padding:9px!important;resize:vertical}
.p11-customer-inline{display:grid;grid-template-columns:1fr auto;gap:7px}.p11-customer-inline .btn{height:39px!important}
.p11-pay-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p11-pay-choice{height:37px;border:1px solid #293960;border-radius:8px;background:#0b1530;color:#8290af;font-size:9px;font-weight:800;cursor:pointer}
.p11-pay-choice.active{background:linear-gradient(90deg,#4e37c8,#6948e6);border-color:#765aff;color:#fff}
.p11-pay-help{min-height:30px;margin-top:7px;color:#6f7e9e;font-size:8px;line-height:1.45}
.p11-change{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:8px 10px;border:1px solid #274c55;border-radius:8px;background:#0c262d;color:#9ecbd1;font-size:9px}
.p11-change b{font-size:12px;color:#35e0b0}
.p11-summary{margin-top:14px;border:1px solid #2a3a62;border-radius:11px;background:linear-gradient(145deg,#101b39,#0a142e);padding:12px}
.p11-total-line{display:flex;justify-content:space-between;align-items:center;color:#7d8bad;font-size:9px;margin:5px 0}
.p11-total-line b{color:#cbd4e9;font-size:10px}.p11-total-line.grand{margin-top:8px;padding-top:9px;border-top:1px dashed #324269;font-size:12px;color:#dfe5f5}.p11-total-line.grand b{font-size:19px;color:#fff}
.p11-total-line.due b{color:#ff8c9c}.p11-total-line.paid b{color:#36dca5}
.p11-complete{width:100%;height:52px;margin-top:12px;border:1px solid #815fff;border-radius:10px;color:#fff;font-size:12px;font-weight:900;background:linear-gradient(90deg,#4d35db,#7b3ff1 58%,#339edc);box-shadow:0 11px 28px rgba(91,65,220,.21);cursor:pointer}
.p11-complete:hover{filter:brightness(1.06)}.p11-complete:disabled{opacity:.55;cursor:wait}
.p11-clear{width:100%;height:37px;margin-top:8px;border:1px solid #3a496b;border-radius:8px;background:#0c1630;color:#8e9bb9;font-size:9px;font-weight:750;cursor:pointer}
.p11-secure{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:9px;color:#5f6f91;font-size:8px}.p11-secure svg{width:12px;color:#2bd99f}
.p11-sale-msg{margin-top:10px}.p11-sale-msg .alert{margin:0;font-size:9px}
@media(max-width:1180px){.p11-pos-shell{grid-template-columns:1fr}.p11-pos-right{position:static}.p11-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:900px){.p11-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.p11-scan-row{grid-template-columns:1fr 72px 105px}.p11-scan-row .p11-camera-btn{grid-column:1/-1}.p11-product-tools{grid-template-columns:1fr 1fr 72px 120px}.p11-product-tools .p11-add-btn{grid-column:1/-1}}
@media(max-width:620px){.p11-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p11-product-tools{grid-template-columns:1fr 72px}.p11-product-tools #posProduct,.p11-product-tools #posProductSearch{grid-column:1/-1}.p11-cart-row{grid-template-columns:1fr 72px 32px}.p11-line-total{grid-column:1/3;text-align:left}.p11-payment-grid{grid-template-columns:1fr}.p11-payment-grid .full{grid-column:auto}}



/* ============================================================
   PHASE 12 — DARK SURFACE QA / NO-WHITE-GLITCH
   ============================================================ */
body .p10-main .table-wrap,
body .p10-main .table-wrap table,
body .p10-main .table-wrap thead,
body .p10-main .table-wrap tbody{background:#09132c!important}
body .p10-main .table-wrap table tbody tr td{background:#09132c!important;color:#c8d2e8!important}
body .p10-main .table-wrap table tbody tr:nth-child(even) td{background:#0c1732!important}
body .p10-main .table-wrap table tbody tr:hover td{background:#111f40!important}
body .p10-main .table-wrap table th{background:#0d1935!important;color:#8392b6!important;border-color:#203158!important}
body .p10-main .chart-card{background:linear-gradient(145deg,#0d1734,#09132c)!important;border-color:#24345d!important}
body .p10-main .chart-svg{background:linear-gradient(180deg,#09142e,#081127)!important;border-color:#24345d!important}
body .p10-main .chart-grid{stroke:#223354!important}
body .p10-main .chart-axis{stroke:#3b4c72!important}
body .p10-main .chart-label{fill:#8795b7!important;color:#8795b7!important}
body .p10-main .chart-value{fill:#dce5fa!important;color:#dce5fa!important}
body .p10-main .chart-legend{color:#8290b0!important}
body .p10-main .chart-empty{background:#0a142d!important;border-color:#2a3a60!important;color:#7483a5!important}
body .p10-main .kpi-item,body .p10-main .total-box{background:#0a142d!important;border-color:#26375f!important}
body .p10-main .tab{background:#0b1530!important;color:#92a0be!important;border-color:#27385f!important}
body .p10-main .tab.active{background:linear-gradient(90deg,#4f38cf,#7048e8)!important;color:#fff!important}
body .p10-main .alert.info{background:#0b2941!important;color:#59d8ff!important;border-color:#155077!important}
body .p10-main .alert.warn{background:#2a2117!important;color:#ffc56e!important;border-color:#604727!important}
body .p10-main .alert.danger{background:#29161f!important;color:#ff879a!important;border-color:#653044!important}
body .p10-main .badge.green{background:#12382c!important;color:#55e8ad!important}
body .p10-main .badge.red{background:#3b1c25!important;color:#ff8d9e!important}
body .p10-main .badge.yellow{background:#3a2b18!important;color:#ffc56e!important}
body .p10-main .badge.blue{background:#142b4c!important;color:#76b5ff!important}
body .p10-main .badge.gray{background:#172039!important;color:#a0adc8!important}

/* Login trust strip: keep all 3 proof points on one clean row. */
.nv-trust{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;width:100%!important;max-width:720px!important;
  margin-top:28px!important;padding:18px 20px!important;
  border:1px solid #1f2d52!important;border-radius:14px!important;
  background:rgba(10,17,40,.72)!important
}
.nv-trust span{display:block!important;min-width:0!important;padding:0 18px!important;border-right:1px solid #263457!important}
.nv-trust span:first-child{padding-left:0!important}
.nv-trust span:last-child{padding-right:0!important;border-right:0!important}
.nv-trust b{display:block!important;margin-bottom:4px!important;white-space:nowrap!important}
.nv-auth-card input{background:#091129!important;color:#f3f6ff!important;border-color:#344163!important}
.nv-auth-card input:-webkit-autofill,
.nv-auth-card input:-webkit-autofill:hover,
.nv-auth-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f3f6ff!important;
  -webkit-box-shadow:0 0 0 1000px #091129 inset!important;
  caret-color:#f3f6ff!important
}
@media(max-width:760px){.nv-trust{grid-template-columns:1fr!important}.nv-trust span{padding:10px 0!important;border-right:0!important;border-bottom:1px solid #263457!important}.nv-trust span:last-child{border-bottom:0!important}}

/* Shared charts use responsive tracks instead of fixed-width preview canvases. */
body .p10-main .nv-chart{min-width:0;border-radius:8px;background:#101b2c!important;box-shadow:none;padding:16px}
body .p10-main .nv-chart .chart-svg{width:100%;min-width:0;height:auto;border:0;border-radius:0;background:transparent!important}
.nv-chart .chart-head h3{font-size:15px;line-height:1.4}
.nv-chart .chart-grid{stroke-dasharray:3 5}
.nv-chart .chart-label{font-weight:500}
.nv-chart-point:focus,.nv-chart-point:hover{stroke:#fff;stroke-width:3;outline:none}
.chart-data{font-size:12px;margin-top:14px;color:#a6b5c8}
.chart-data summary{cursor:pointer;padding:6px 0;width:fit-content}
.chart-data .table-wrap{max-height:250px;overflow:auto}
.nv-bars{display:grid;gap:16px}
.nv-bar-caption{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:12px;line-height:1.5}
.nv-bar-caption span{overflow-wrap:anywhere;min-width:0}
.nv-bar-caption b{flex-shrink:0;font-variant-numeric:tabular-nums}
.nv-bar-track{height:7px;background:#253248;border-radius:4px;overflow:hidden}
.nv-bar-track i{display:block;height:100%;border-radius:4px}
.nv-overview .chart-card{margin:0;border:0!important;border-radius:0!important;background:transparent!important}
.nv-overview .chart-head{display:none}
.p10-card-head select{width:auto;min-width:112px;font-size:12px;padding:7px;border-radius:6px}
.p10-dashboard-grid>*{min-width:0}
.p10-donut-body{flex-wrap:wrap}
.p10-legend{min-width:0;flex:1 1 150px}
.p10-legend-row{gap:7px;overflow-wrap:anywhere}
.p10-legend-row b{font-variant-numeric:tabular-nums}
@media(max-width:640px){.nv-bar-caption{flex-wrap:wrap}.p10-donut-body{justify-content:center}.nv-chart .chart-data table{min-width:0}}

/* Phase 32 - installable PWA, safe app updates and desktop-style POS focus mode */
.phase32-boot{position:fixed;inset:0;z-index:999999;background:radial-gradient(circle at 50% 20%,#151b45 0,#080c20 38%,#050817 76%);display:grid;place-items:center;padding:24px;color:#e8ecff;font-family:Inter,Segoe UI,Arial,sans-serif}.phase32-boot-card{width:min(460px,92vw);text-align:center;padding:38px;border:1px solid #252e59;border-radius:26px;background:rgba(9,13,35,.9);box-shadow:0 28px 80px rgba(0,0,0,.38)}.phase32-boot-card img{width:92px;height:92px;object-fit:contain;margin-bottom:14px}.phase32-boot-card h2{letter-spacing:.24em;margin:10px 0 8px}.phase32-boot-card p{margin:0 0 16px;color:#c6cdef}.phase32-boot-card small{display:block;margin-top:16px;color:#7f8cac;line-height:1.55}.phase32-boot-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.phase32-boot-meta span,.phase32-status{display:inline-flex;align-items:center;gap:6px;border:1px solid #313b68;background:#101633;color:#b9c3e4;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:700}.phase32-status i{width:7px;height:7px;border-radius:50%;background:#7180a6}.phase32-status.ok i{background:#24c58b;box-shadow:0 0 0 3px rgba(36,197,139,.13)}.phase32-status.warn i{background:#f5b942}.phase32-top-btn{border:1px solid #3a4678;background:#111837;color:#dce4ff;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}.phase32-top-btn.update{border-color:#7b5cff;background:rgba(112,78,255,.16);color:#d9d0ff}.phase32-update-banner{margin:12px 18px 0;padding:12px 14px;border:1px solid rgba(126,91,255,.38);background:linear-gradient(90deg,rgba(107,76,255,.12),rgba(43,151,255,.08));border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:14px}.phase32-update-banner b{display:block;color:#e9e5ff}.phase32-update-banner span{display:block;color:#9eabd0;font-size:12px;margin-top:3px}.phase32-device-strip{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.phase32-device-panel .phase32-readiness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.phase32-readiness-grid>div{border:1px solid #e5e7eb;border-radius:12px;padding:11px 12px;background:#fafbff}.phase32-readiness-grid span{display:block;font-size:11px;color:#6b7280;margin-bottom:5px}.phase32-readiness-grid b{font-size:13px;color:#111827}.phase32-pos-focus .p10-sidebar{display:none!important}.phase32-pos-focus .p10-main{margin-left:0!important;width:100%!important}.phase32-pos-focus .p10-topbar{display:none!important}.phase32-pos-focus .p11-pos-tabs{position:sticky;top:0;z-index:25;background:var(--bg,#f7f8fb);padding-top:8px}.phase32-pos-focus .p11-pos-shell{min-height:100vh}.phase32-pos-focus .p10-page-head{display:none!important}@media(max-width:1050px){.phase32-device-panel .phase32-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.phase32-update-banner{align-items:flex-start;flex-direction:column}.phase32-device-panel .phase32-readiness-grid{grid-template-columns:1fr}}


:root{
  --nv-bg:#050817;
  --nv-bg2:#080d22;
  --nv-panel:#0b1128;
  --nv-panel2:#0e1633;
  --nv-border:#242d52;
  --nv-text:#f5f7ff;
  --nv-muted:#98a4c5;
  --nv-purple:#7a42ff;
  --nv-blue:#4c72ff;
  --nv-cyan:#43d5ff;
}
.nv-cloud-auth{
  min-height:100vh;
  background:
    radial-gradient(circle at 22% 30%, rgba(93,66,255,.15), transparent 30%),
    radial-gradient(circle at 78% 55%, rgba(49,129,255,.10), transparent 28%),
    linear-gradient(135deg,var(--nv-bg),#070b1c 46%,#071024);
  color:var(--nv-text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);
  overflow:hidden;
  position:relative;
}
.nv-cloud-auth:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:
    linear-gradient(rgba(85,100,160,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,100,160,.08) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to right,black,transparent 72%);
}
.nv-auth-brand{
  padding:56px clamp(42px,7vw,116px);
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;
}
.nv-auth-logo-row{display:flex;align-items:center;gap:22px;margin-bottom:48px}
.nv-auth-logo{
  width:104px;height:104px;object-fit:contain;border-radius:24px;
  filter:drop-shadow(0 0 20px rgba(83,98,255,.25));
}
.nv-auth-brandname{font-size:34px;letter-spacing:9px;font-weight:700;line-height:1}
.nv-auth-subbrand{font-size:15px;letter-spacing:7px;color:#8fa4ff;margin-top:9px}
.nv-auth-kicker{
  display:inline-flex;align-items:center;gap:8px;color:#9dc6ff;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  border:1px solid rgba(83,190,255,.28);border-radius:999px;padding:10px 14px;width:max-content;
  background:rgba(7,18,43,.58);margin-bottom:24px
}
.nv-auth-kicker i{width:7px;height:7px;border-radius:50%;background:var(--nv-cyan);box-shadow:0 0 13px var(--nv-cyan)}
.nv-auth-title{font-size:clamp(38px,4.2vw,68px);line-height:1.03;margin:0 0 20px;font-weight:800;letter-spacing:-2px}
.nv-gradient-text{
  background:linear-gradient(90deg,#a966ff,#7b87ff 48%,#43d9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nv-auth-copy{max-width:650px;color:var(--nv-muted);font-size:17px;line-height:1.7;margin-bottom:28px}
.nv-features{display:grid;gap:15px;max-width:650px}
.nv-feature{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:center}
.nv-feature-icon{
  width:42px;height:42px;border:1px solid rgba(113,102,255,.28);
  border-radius:12px;display:grid;place-items:center;color:#a783ff;
  background:linear-gradient(145deg,rgba(86,74,255,.13),rgba(18,27,58,.55));
}
.nv-feature b{display:block;font-size:15px;margin-bottom:3px}
.nv-feature span{display:block;color:#8996b8;font-size:13px}
.nv-trust{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(126,142,195,.14);color:#8996b8;font-size:12px
}
.nv-trust b{color:#dfe6ff}
.nv-auth-side{
  min-height:100vh;display:grid;place-items:center;padding:38px;position:relative;z-index:2;
}
.nv-auth-card{
  width:min(100%,520px);
  background:linear-gradient(160deg,rgba(13,20,47,.98),rgba(7,12,31,.98));
  border:1px solid var(--nv-border);
  border-radius:28px;padding:44px 46px;
  box-shadow:0 35px 90px rgba(0,0,0,.35),0 0 70px rgba(74,72,220,.07);
}
.nv-auth-card h1{font-size:38px;margin:0 0 8px;letter-spacing:-1px}
.nv-auth-card .lead{color:var(--nv-muted);margin-bottom:32px}
.nv-field{margin-bottom:19px}
.nv-field label{display:block;font-size:13px;color:#cbd3ec;margin:0 0 8px}
.nv-input-wrap{position:relative}
.nv-input-wrap .nv-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8693b6;font-size:18px}
.nv-input-wrap input{
  width:100%;box-sizing:border-box;background:#091029;color:#f5f7ff;
  border:1px solid #293457;border-radius:12px;padding:14px 46px 14px 44px;
  outline:none;font-size:15px;transition:.2s;
}
.nv-input-wrap input:focus{border-color:#705cff;box-shadow:0 0 0 3px rgba(112,92,255,.12)}
.nv-input-wrap input::placeholder{color:#596788}
.nv-eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#9ba7c7;cursor:pointer;font-size:18px;padding:7px
}
.nv-auth-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:4px 0 24px;font-size:13px;color:#b7c0d9}
.nv-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.nv-check input{accent-color:#754cff}
.nv-link{color:#9a6cff;text-decoration:none;cursor:pointer}
.nv-link:hover{color:#55d7ff}
.nv-btn{
  width:100%;border:0;border-radius:12px;padding:14px 18px;font-weight:700;font-size:15px;cursor:pointer;
  color:white;background:linear-gradient(90deg,#6634f6,#8c42ff 50%,#3eafff);
  box-shadow:0 12px 30px rgba(99,67,255,.19);transition:.2s
}
.nv-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.nv-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}
.nv-btn.secondary{
  background:transparent;border:1px solid #4d50a5;box-shadow:none;color:#eef1ff
}
.nv-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:#667394;font-size:12px}
.nv-or:before,.nv-or:after{content:"";height:1px;background:#26304f;flex:1}
.nv-auth-support{text-align:center;color:#7f8cab;font-size:13px;margin-top:24px}
.nv-auth-alert{
  margin:0 0 18px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.45;
  background:rgba(255,75,100,.09);border:1px solid rgba(255,87,112,.25);color:#ffb4c0
}
.nv-auth-alert.success{background:rgba(59,205,154,.09);border-color:rgba(59,205,154,.28);color:#9ef2d0}
.nv-auth-back{display:inline-block;margin-bottom:22px;color:#8795bb;cursor:pointer;font-size:13px}
.nv-password-hint{font-size:11px;color:#667394;margin-top:6px}
.nv-auth-loading{
  position:fixed;inset:0;background:#050817;display:grid;place-items:center;z-index:99999;
  color:#aab6d5;font-family:Inter,Segoe UI,Arial,sans-serif
}
.nv-auth-loading-inner{text-align:center}
.nv-auth-loading img{width:92px;height:92px;object-fit:contain;margin-bottom:18px}
.nv-spinner{width:32px;height:32px;border:3px solid #232d51;border-top-color:#764eff;border-radius:50%;animation:nvspin .8s linear infinite;margin:0 auto 14px}
@keyframes nvspin{to{transform:rotate(360deg)}}
@media(max-width:980px){
  .nv-cloud-auth{grid-template-columns:1fr}
  .nv-auth-brand{display:none}
  .nv-auth-side{padding:24px;min-height:100vh}
  .nv-auth-card{padding:34px 28px}
}
@media(max-width:520px){
  .nv-auth-side{padding:14px}.nv-auth-card{border-radius:20px;padding:28px 20px}
  .nv-auth-card h1{font-size:31px}
}


/* Phase 35 strict style-CSP dynamic visual states */
.barcode-msg-info{color:#475569}.barcode-msg-success{color:#166534}.barcode-msg-danger{color:#991b1b}
.nv-bar-fill.sales{background:#278ee8}.nv-bar-fill.expense{background:#e6647b}
.p10-color-0{background:#278ee8}.p10-color-1{background:#16b89a}.p10-color-2{background:#e6647b}.p10-color-3{background:#e5b443}.p10-color-4{background:#45b9cc}.p10-color-5{background:#929ba8}
.p10-donut-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.p10-donut-segment,.p10-donut-base{transform-origin:66px 66px}
.sync-status-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;text-transform:capitalize}
.sync-status-failed{background:#fee2e2;color:#991b1b}.sync-status-conflict{background:#fef2f2;color:#9f1239}.sync-status-pending{background:#fff7ed;color:#9a3412}.sync-status-syncing{background:#e0f2fe;color:#075985}.sync-status-synced,.sync-status-completed,.sync-status-recovered,.sync-status-restored,.sync-status-repaired{background:#dcfce7;color:#166534}.sync-status-deferred{background:#fef3c7;color:#92400e}.sync-status-retry_requested,.sync-status-backup,.sync-status-info{background:#e0e7ff;color:#3730a3}.sync-status-cancelled{background:#f3f4f6;color:#374151}
.sync-dependency{font-size:12px;font-weight:500}.sync-dependency-normal{color:#6b7280}.sync-dependency-dependency{color:#92400e}.sync-dependency-blocked{color:#b91c1c;font-weight:700}
.sync-last-error{font-size:12px;margin-top:3px}.sync-last-error.danger{color:#b91c1c}.sync-last-error.muted{color:#6b7280}
[data-nv-width="0"]{width:0%}
[data-nv-width="1"]{width:1%}
[data-nv-width="2"]{width:2%}
[data-nv-width="3"]{width:3%}
[data-nv-width="4"]{width:4%}
[data-nv-width="5"]{width:5%}
[data-nv-width="6"]{width:6%}
[data-nv-width="7"]{width:7%}
[data-nv-width="8"]{width:8%}
[data-nv-width="9"]{width:9%}
[data-nv-width="10"]{width:10%}
[data-nv-width="11"]{width:11%}
[data-nv-width="12"]{width:12%}
[data-nv-width="13"]{width:13%}
[data-nv-width="14"]{width:14%}
[data-nv-width="15"]{width:15%}
[data-nv-width="16"]{width:16%}
[data-nv-width="17"]{width:17%}
[data-nv-width="18"]{width:18%}
[data-nv-width="19"]{width:19%}
[data-nv-width="20"]{width:20%}
[data-nv-width="21"]{width:21%}
[data-nv-width="22"]{width:22%}
[data-nv-width="23"]{width:23%}
[data-nv-width="24"]{width:24%}
[data-nv-width="25"]{width:25%}
[data-nv-width="26"]{width:26%}
[data-nv-width="27"]{width:27%}
[data-nv-width="28"]{width:28%}
[data-nv-width="29"]{width:29%}
[data-nv-width="30"]{width:30%}
[data-nv-width="31"]{width:31%}
[data-nv-width="32"]{width:32%}
[data-nv-width="33"]{width:33%}
[data-nv-width="34"]{width:34%}
[data-nv-width="35"]{width:35%}
[data-nv-width="36"]{width:36%}
[data-nv-width="37"]{width:37%}
[data-nv-width="38"]{width:38%}
[data-nv-width="39"]{width:39%}
[data-nv-width="40"]{width:40%}
[data-nv-width="41"]{width:41%}
[data-nv-width="42"]{width:42%}
[data-nv-width="43"]{width:43%}
[data-nv-width="44"]{width:44%}
[data-nv-width="45"]{width:45%}
[data-nv-width="46"]{width:46%}
[data-nv-width="47"]{width:47%}
[data-nv-width="48"]{width:48%}
[data-nv-width="49"]{width:49%}
[data-nv-width="50"]{width:50%}
[data-nv-width="51"]{width:51%}
[data-nv-width="52"]{width:52%}
[data-nv-width="53"]{width:53%}
[data-nv-width="54"]{width:54%}
[data-nv-width="55"]{width:55%}
[data-nv-width="56"]{width:56%}
[data-nv-width="57"]{width:57%}
[data-nv-width="58"]{width:58%}
[data-nv-width="59"]{width:59%}
[data-nv-width="60"]{width:60%}
[data-nv-width="61"]{width:61%}
[data-nv-width="62"]{width:62%}
[data-nv-width="63"]{width:63%}
[data-nv-width="64"]{width:64%}
[data-nv-width="65"]{width:65%}
[data-nv-width="66"]{width:66%}
[data-nv-width="67"]{width:67%}
[data-nv-width="68"]{width:68%}
[data-nv-width="69"]{width:69%}
[data-nv-width="70"]{width:70%}
[data-nv-width="71"]{width:71%}
[data-nv-width="72"]{width:72%}
[data-nv-width="73"]{width:73%}
[data-nv-width="74"]{width:74%}
[data-nv-width="75"]{width:75%}
[data-nv-width="76"]{width:76%}
[data-nv-width="77"]{width:77%}
[data-nv-width="78"]{width:78%}
[data-nv-width="79"]{width:79%}
[data-nv-width="80"]{width:80%}
[data-nv-width="81"]{width:81%}
[data-nv-width="82"]{width:82%}
[data-nv-width="83"]{width:83%}
[data-nv-width="84"]{width:84%}
[data-nv-width="85"]{width:85%}
[data-nv-width="86"]{width:86%}
[data-nv-width="87"]{width:87%}
[data-nv-width="88"]{width:88%}
[data-nv-width="89"]{width:89%}
[data-nv-width="90"]{width:90%}
[data-nv-width="91"]{width:91%}
[data-nv-width="92"]{width:92%}
[data-nv-width="93"]{width:93%}
[data-nv-width="94"]{width:94%}
[data-nv-width="95"]{width:95%}
[data-nv-width="96"]{width:96%}
[data-nv-width="97"]{width:97%}
[data-nv-width="98"]{width:98%}
[data-nv-width="99"]{width:99%}
[data-nv-width="100"]{width:100%}