:root{
  --bg:#07080d;
  --bg-2:#0b1020;
  --bg-3:#121826;

  --card:rgba(255,255,255,0.92);
  --card-strong:#ffffff;
  --card-soft:rgba(255,255,255,0.86);

  --text:#0f172a;
  --muted:#64748b;
  --soft-muted:#94a3b8;

  --line:rgba(15,23,42,0.08);
  --line-strong:rgba(15,23,42,0.14);

  --shadow:0 24px 60px rgba(2,6,23,0.18), 0 8px 24px rgba(2,6,23,0.08);
  --shadow-soft:0 14px 34px rgba(2,6,23,0.12);
  --shadow-deep:0 28px 70px rgba(0,0,0,0.34);

  --radius:24px;
  --radius-lg:28px;
  --radius-sm:18px;

  --red:#dc2626;
  --red-light:#ef4444;
  --red-dark:#991b1b;

  --green:#16a34a;
  --green-light:#22c55e;
  --green-dark:#166534;

  --blue:#2563eb;
  --blue-light:#60a5fa;

  --dark:#111827;
  --navy:#0f172a;
  --surface:#f8fafc;
  --surface-2:#f1f5f9;

  --glass:rgba(255,255,255,0.08);
  --glass-line:rgba(255,255,255,0.10);

  --wm-image:url("../../mr-vapor-logo.png");
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 15% 0%, rgba(239,68,68,0.13), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(37,99,235,0.10), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.04), transparent 22%),
    linear-gradient(180deg, #090b12 0%, #0b1020 42%, #07080d 100%);
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.012), rgba(255,255,255,0.012)),
    radial-gradient(circle at center, transparent 0 58%, rgba(0,0,0,0.18) 100%);
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:auto auto 4vh 50%;
  transform:translateX(-50%);
  width:min(76vw, 860px);
  height:min(20vw, 200px);
  background-image:var(--wm-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.045;
  filter:grayscale(1) brightness(1.45) contrast(1.05);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

img{
  max-width:100%;
  display:block;
}

.app{
  width:100%;
  min-height:100vh;
  position:relative;
  z-index:1;
}

.shell{
  width:min(100%, 1220px);
  margin:0 auto;
  padding:18px 14px 112px;
  position:relative;
  z-index:1;
}

.page{
  display:block;
}

.hidden{
  display:none !important;
}

/* Hero */

.hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(10,14,26,0.92), rgba(15,23,42,0.95)),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--glass-line);
  border-radius:30px;
  padding:20px;
  box-shadow:var(--shadow-deep);
  margin-bottom:18px;
  text-align:center;
  isolation:isolate;
  backdrop-filter:blur(16px);
}

.hero::before{
  content:"";
  position:absolute;
  inset:auto -110px -110px auto;
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(239,68,68,0.22), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:12px;
  width:min(48vw, 420px);
  height:min(14vw, 130px);
  background-image:var(--wm-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.10;
  filter:grayscale(1) brightness(1.65) contrast(1.1);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}

/* Hero Logo - Clean Responsive Landscape */

.logo-box,
.hero-logo-landscape{
  position:relative;
  width:100%;
  max-width:820px;
  height:clamp(120px, 16vw, 190px);
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  z-index:1;
}

.logo-box::before,
.logo-box::after,
.hero-logo-landscape::before,
.hero-logo-landscape::after{
  content:none !important;
  display:none !important;
}

.logo-box img,
.hero-logo-landscape img{
  width:100%;
  max-width:820px;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  transform:none;
  transform-origin:center;
  position:relative;
  z-index:1;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,0.18))
    drop-shadow(0 0 24px rgba(239,68,68,0.16));
}

.logo-fallback{
  display:none;
  color:#fff;
  font-size:24px;
  font-weight:900;
  letter-spacing:0.12em;
}

.hero-copy{
  position:relative;
  margin:16px auto 0;
  max-width:760px;
  text-align:center;
  z-index:1;
}

.hero-copy h1{
  margin:0 0 8px;
  font-size:clamp(23px, 4vw, 38px);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,0.28);
}

.hero-copy p{
  margin:0;
  color:rgba(255,255,255,0.76);
  font-size:12px;
  line-height:1.6;
}

/* Layout */

.layout{
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  gap:18px;
}

.layout-wide{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap:18px;
}

.stack,
.summary-stack{
  min-width:0;
  display:grid;
  gap:18px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

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

.grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
}

.order-info-grid,
.report-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
  align-items:end;
  margin-bottom:14px;
}

.order-info-grid .field,
.report-info-grid .field{
  margin-bottom:0;
}

/* Cards */

.card{
  min-width:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)),
    linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0.30));
  color:var(--text);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.72);
  backdrop-filter:blur(10px);
  transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}

.card::after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:4px;
  width:220px;
  height:82px;
  background-image:var(--wm-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.045;
  filter:grayscale(1) brightness(1.55) contrast(1.06);
  mix-blend-mode:multiply;
  transform:rotate(-6deg);
  pointer-events:none;
  z-index:0;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 60px rgba(2,6,23,0.18), 0 10px 24px rgba(2,6,23,0.08);
  border-color:rgba(255,255,255,0.92);
}

.card-head,
.card-body{
  position:relative;
  z-index:1;
}

.card-head{
  padding:16px 18px 0;
}

.card-title{
  margin:0;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
}

.card-body{
  padding:18px;
}

/* Forms */

.field{
  margin-bottom:14px;
}

.field:last-child{
  margin-bottom:0;
}

label{
  display:block;
  margin-bottom:7px;
  font-size:10.5px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:0.05em;
  text-transform:none;
}

input,
select,
textarea{
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.96);
  color:var(--text);
  border-radius:15px;
  outline:none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 2px rgba(2,6,23,0.03);
}

input,
select{
  height:48px;
  padding:0 14px;
  font-size:14px;
}

textarea{
  min-height:96px;
  padding:12px 14px;
  resize:vertical;
  font-size:14px;
  line-height:1.5;
}

input::placeholder,
textarea::placeholder{
  color:#94a3b8;
  opacity:1;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(17,24,39,0.28);
  box-shadow:
    0 0 0 4px rgba(17,24,39,0.07),
    0 10px 20px rgba(2,6,23,0.05);
  background:#fff;
}

input[readonly],
input:disabled{
  background:#f1f5f9;
  color:#475569;
}

button:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

.helper-text{
  font-size:10.5px;
  color:#64748b;
  line-height:1.5;
}

/* Buttons */

.primary-btn,
.secondary-btn,
.whatsapp-btn,
.edit-btn,
.okay-btn{
  width:100%;
  border:none;
  border-radius:18px;
  padding:13px 15px;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  line-height:1.2;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

.primary-btn:active,
.secondary-btn:active,
.whatsapp-btn:active,
.edit-btn:active,
.okay-btn:active,
.small-btn:active,
.remove-btn:active{
  transform:scale(0.985);
}

.primary-btn:hover,
.secondary-btn:hover,
.whatsapp-btn:hover,
.edit-btn:hover,
.okay-btn:hover,
.small-btn:hover{
  filter:brightness(1.02);
}

.primary-btn{
  background:linear-gradient(145deg, #ef4444, #dc2626);
  color:#fff;
  box-shadow:0 12px 30px rgba(239,68,68,0.28);
}

.secondary-btn{
  background:linear-gradient(180deg, #ffffff, #f3f4f6);
  color:#111827;
  box-shadow:0 8px 20px rgba(2,6,23,0.08);
}

.secondary-btn.dark{
  background:linear-gradient(145deg, #111827, #1f2937);
  color:#fff;
  box-shadow:0 12px 28px rgba(17,24,39,0.20);
}

.secondary-btn.light{
  background:linear-gradient(180deg, #ffffff, #f3f4f6);
  color:#111827;
}

.whatsapp-btn{
  background:linear-gradient(145deg, #22c55e, #16a34a);
  color:#fff;
  box-shadow:0 12px 30px rgba(34,197,94,0.24);
}

.edit-btn{
  background:linear-gradient(180deg, #ffffff, #f3f4f6);
  color:#111827;
  box-shadow:0 8px 20px rgba(2,6,23,0.08);
}

.okay-btn{
  margin-top:12px;
  background:linear-gradient(145deg, #111827, #1f2937);
  color:#fff;
  box-shadow:0 12px 28px rgba(17,24,39,0.20);
}

.small-btn{
  border:none;
  border-radius:12px;
  padding:8px 11px;
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
}

.remove-btn{
  min-width:28px;
  border:none;
  background:transparent;
  color:#be123c;
  padding:0 4px;
  border-radius:8px;
  font-size:25px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.remove-btn:hover{
  color:#7f1d1d;
}

/* Shared list */

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

.item-list,
.selection-list,
.return-list{
  display:grid;
  gap:14px;
}

.item-card,
.selection-card,
.return-item{
  background:rgba(250,250,250,0.88);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}

.item-card,
.return-item{
  padding:14px;
}

.item-top,
.return-top,
.selection-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.item-index,
.return-index,
.selection-index{
  font-size:13px;
  font-weight:900;
  color:#111827;
}

.empty-item,
.empty-box,
.empty-return{
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  border:1px dashed #d1d5db;
  color:#64748b;
  border-radius:18px;
  padding:13px;
  font-size:11.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}

.loading-box{
  background:linear-gradient(180deg, #eff6ff, #dbeafe);
  border:1px dashed #93c5fd;
  color:#1d4ed8;
  border-radius:18px;
  padding:13px;
  font-size:11.5px;
  font-weight:800;
}

.error-box{
  background:linear-gradient(180deg, #fef2f2, #fee2e2);
  border:1px dashed #fecaca;
  color:#991b1b;
  border-radius:18px;
  padding:13px;
  font-size:11.5px;
  font-weight:800;
}

/* Preview */

.preview-box{
  position:relative;
  background:linear-gradient(180deg, #0f172a, #111827);
  color:#e5e7eb;
  border-radius:22px;
  padding:16px;
  min-height:260px;
  max-height:clamp(300px, 58vh, 560px);
  overflow-y:auto;
  overscroll-behavior:contain;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.6;
  font-size:12.5px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 30px rgba(15,23,42,0.18);
}

.preview-box::before{
  content:"";
  position:absolute;
  right:-14px;
  bottom:-8px;
  width:170px;
  height:68px;
  background-image:var(--wm-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.06;
  filter:grayscale(1) brightness(1.65);
  mix-blend-mode:screen;
  pointer-events:none;
}

.preview-box::-webkit-scrollbar{
  width:8px;
}

.preview-box::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.06);
  border-radius:999px;
}

.preview-box::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.24);
  border-radius:999px;
}

/* Sticky bar */

.sticky-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  background:rgba(8,8,12,0.72);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 -10px 30px rgba(0,0,0,0.18);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
}

.sticky-inner{
  width:min(100%, 1220px);
  margin:0 auto;
}

.action-single,
.action-double{
  display:grid;
  gap:10px;
}

.action-double{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.note{
  margin-top:7px;
  text-align:center;
  color:rgba(255,255,255,0.66);
  font-size:10px;
  line-height:1.45;
}

/* Summary and overview cards */

.summary-grid,
.sales-overview-grid,
.mtd-only-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
  align-items:stretch;
}

.sales-overview-grid,
.mtd-only-grid{
  margin-top:14px;
}

.summary-stat{
  min-width:0;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  overflow:visible;
  box-shadow:0 10px 24px rgba(2,6,23,0.06);
}

.summary-stat-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:900;
  color:var(--muted);
  line-height:1.35;
}

.summary-stat-value{
  margin-top:8px;
  max-width:100%;
  font-size:clamp(20px, 2.25vw, 30px);
  font-weight:950;
  line-height:1.05;
  letter-spacing:-0.035em;
  white-space:normal;
  overflow-wrap:anywhere;
  overflow:visible;
  font-variant-numeric:tabular-nums;
}

.summary-stat-note{
  margin-top:8px;
  font-size:10.5px;
  color:#64748b;
  line-height:1.35;
}

.summary-total .summary-stat-value,
.summary-sales .summary-stat-value,
.summary-mtd-target .summary-stat-value{
  color:#111827;
}

.summary-tally .summary-stat-value,
.summary-excess .summary-stat-value,
.summary-bank .summary-stat-value,
.summary-mtd-current .summary-stat-value{
  color:#166534;
}

.summary-shortage .summary-stat-value,
.summary-mtd-balance .summary-stat-value{
  color:#991b1b;
}

.summary-balance-sales,
.summary-readonly,
.summary-disabled{
  background:linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-color:#d1d5db;
  cursor:not-allowed;
  user-select:none;
}

.summary-balance-sales .summary-stat-label,
.summary-balance-sales .summary-stat-note,
.summary-readonly .summary-stat-label,
.summary-readonly .summary-stat-note,
.summary-disabled .summary-stat-label,
.summary-disabled .summary-stat-note{
  color:#64748b;
}

.summary-balance-sales .summary-stat-value,
.summary-readonly .summary-stat-value,
.summary-disabled .summary-stat-value{
  color:#6b7280;
}

.readonly-output,
input[readonly].readonly-output,
input:disabled.readonly-output{
  background:#f1f5f9;
  color:#64748b;
  border-color:#d1d5db;
  cursor:not-allowed;
  pointer-events:none;
  user-select:none;
  font-weight:900;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.calculated-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, #f8fafc, #f1f5f9);
  border:1px solid #e5e7eb;
  color:#475569;
  font-size:10.5px;
  line-height:1.45;
}

/* Stock check support */

.qty-input{
  text-align:center;
  font-weight:900;
}

.diff-box,
.status-box{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:14px;
  padding:0 14px;
  background:#f8fafc;
  font-size:13px;
  font-weight:900;
}

.status-box{
  justify-content:flex-start;
}

.diff-zero{
  color:#111827;
}

.diff-pos{
  color:#166534;
  background:#ecfdf5;
  border-color:#bbf7d0;
}

.diff-neg{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fecaca;
}

.status-ok{
  color:#166534;
  background:#ecfdf5;
  border-color:#bbf7d0;
}

.status-bad{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fecaca;
}

/* Order page support */

.selection-card{
  padding:0;
}

.selection-summary{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  background:linear-gradient(145deg, #0f172a, #1e293b);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

.selection-card.collapsed .selection-summary{
  display:flex;
}

.selection-card.collapsed .selection-edit{
  display:none;
}

.selection-summary-main{
  min-width:0;
}

.selection-summary-title{
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  word-break:break-word;
}

.selection-summary-meta{
  margin-top:4px;
  color:rgba(255,255,255,0.66);
  font-size:10.5px;
  line-height:1.4;
}

.selection-summary-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.small-btn.edit-mini{
  background:#f8fafc;
  color:#111827;
}

.small-btn.remove-mini{
  min-width:26px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#fb7185;
  border:none;
  font-size:23px;
  line-height:1;
}

.selection-edit{
  padding:14px;
}

.order-note-card{
  background:linear-gradient(180deg, #fff7ed, #ffedd5);
  border:1px solid #fed7aa;
  color:#7c2d12;
  border-radius:16px;
  padding:10px 11px;
  margin:12px 0;
  font-size:10.5px;
  line-height:1.5;
  font-weight:700;
}

.important-red{
  color:var(--red);
  font-weight:900;
}

.flavour-list{
  display:grid;
  gap:9px;
}

.flavour-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 92px;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  box-shadow:0 6px 14px rgba(2,6,23,0.04);
}

.flavour-row.active{
  background:#ecfdf5;
  border-color:#bbf7d0;
}

.flavour-name{
  font-size:12.5px;
  font-weight:800;
  color:#111827;
  line-height:1.35;
}

.keyboard-next-trigger{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  border:0;
  padding:0;
  margin:0;
}

.review-note-box textarea{
  min-height:112px;
  background:#fff;
  color:#111827;
  border-color:#d1d5db;
}

/* Cash report */

.money-field{
  background:linear-gradient(180deg, #f8fafc, #f1f5f9);
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:12px;
}

.money-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}

.money-prefix{
  position:absolute;
  left:14px;
  z-index:1;
  color:#64748b;
  font-size:12px;
  font-weight:950;
  letter-spacing:0.08em;
  pointer-events:none;
}

.money-input{
  height:54px;
  font-size:22px;
  font-weight:900;
  text-align:right;
  letter-spacing:0.03em;
  background:#fff;
  padding-left:54px;
  font-variant-numeric:tabular-nums;
}

.money-input-wrap .money-input{
  padding-left:54px;
}

.total-card{
  background:linear-gradient(145deg, #ecfdf5, #f0fdf4);
  border:1px solid #bbf7d0;
  border-radius:22px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 10px 26px rgba(22,163,74,0.08);
}

.total-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:900;
  color:#166534;
}

.total-value{
  margin-top:8px;
  color:#14532d;
  font-size:clamp(28px, 5vw, 42px);
  font-weight:950;
  line-height:1.05;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}

.chart-list{
  display:grid;
  gap:16px;
}

.chart-item{
  display:grid;
  gap:8px;
}

.chart-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.chart-name{
  font-size:13px;
  font-weight:900;
  color:#111827;
}

.chart-value{
  font-size:13px;
  font-weight:800;
  color:#4b5563;
}

.chart-track{
  width:100%;
  height:11px;
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
}

.chart-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  transition:width 0.35s ease;
}

.fill-balance{
  background:linear-gradient(90deg, #111827, #374151);
}

.fill-petty{
  background:linear-gradient(90deg, #2563eb, #60a5fa);
}

.fill-claim{
  background:linear-gradient(90deg, #ef4444, #f87171);
}

.fill-extra{
  background:linear-gradient(90deg, #16a34a, #4ade80);
}

.return-summary{
  display:grid;
  gap:12px;
}

.summary-item,
.item-summary{
  background:linear-gradient(180deg, #ffffff, #fafafa);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}

.summary-item h4,
.item-summary h4{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.4;
}

.summary-item p,
.item-summary p{
  margin:4px 0;
  font-size:12px;
  color:#374151;
  line-height:1.5;
}

/* Responsive */

@media(max-width:1180px){
  .layout-wide{
    grid-template-columns:minmax(0, 1fr);
  }

  .layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:980px){
  .layout,
  .layout-wide{
    grid-template-columns:1fr;
  }

  .summary-grid,
  .sales-overview-grid,
  .mtd-only-grid{
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  }
}

@media(max-width:640px){
  body::after{
    width:min(88vw, 560px);
    height:90px;
    opacity:0.035;
  }

  .shell{
    padding:10px 10px 108px;
  }

  .hero{
    padding:12px;
    border-radius:22px;
    margin-bottom:12px;
  }

  .hero::after{
    width:220px;
    height:72px;
    right:8px;
    bottom:8px;
    opacity:0.08;
  }

  .logo-box,
  .hero-logo-landscape{
    width:100%;
    max-width:100%;
    height:clamp(96px, 24vw, 130px);
    min-height:0;
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:hidden;
  }

  .logo-box::before,
  .logo-box::after,
  .hero-logo-landscape::before,
  .hero-logo-landscape::after{
    content:none !important;
    display:none !important;
  }

  .logo-box img,
  .hero-logo-landscape img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
    transform:none;
    transform-origin:center;
  }

  .hero-copy{
    margin-top:10px;
  }

  .hero-copy h1{
    font-size:22px;
  }

  .hero-copy p{
    font-size:11px;
  }

  .layout,
  .layout-wide,
  .stack{
    gap:12px;
  }

  .card{
    border-radius:20px;
  }

  .card::after{
    width:150px;
    height:56px;
    right:-18px;
    bottom:6px;
    opacity:0.04;
  }

  .card-head{
    padding:14px 14px 0;
  }

  .card-title{
    font-size:10.5px;
  }

  .card-body{
    padding:14px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .action-double{
    grid-template-columns:1fr;
  }

  .summary-grid,
  .sales-overview-grid,
  .mtd-only-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  input,
  select{
    height:46px;
    font-size:14px;
  }

  textarea{
    min-height:82px;
    font-size:14px;
  }

  .items-head{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .item-top,
  .return-top,
  .selection-top{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  .selection-summary{
    align-items:center;
    flex-direction:row;
  }

  .selection-edit{
    padding:12px;
  }

  .flavour-row{
    grid-template-columns:minmax(0, 1fr) 78px;
    gap:8px;
    padding:9px;
  }

  .flavour-name{
    font-size:12px;
  }

  .qty-input{
    height:39px;
    font-size:14px;
  }

  .diff-box,
  .status-box{
    height:44px;
    font-size:12.5px;
  }

  .summary-stat{
    min-height:104px;
    padding:14px;
  }

  .summary-stat-value{
    font-size:clamp(22px, 7vw, 32px);
  }

  .preview-box{
    font-size:12px;
    min-height:230px;
    max-height:48vh;
  }

  .preview-box::before{
    width:130px;
    height:50px;
    opacity:0.05;
  }

  .primary-btn,
  .secondary-btn,
  .whatsapp-btn,
  .edit-btn,
  .okay-btn{
    font-size:13px;
    padding:13px 14px;
  }

  .chart-top{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:380px){
  .logo-box,
  .hero-logo-landscape{
    height:clamp(90px, 25vw, 118px);
  }

  .logo-box img,
  .hero-logo-landscape img{
    transform:none;
  }

  .flavour-row{
    grid-template-columns:minmax(0, 1fr) 70px;
    padding:8px;
  }

  .qty-input{
    padding:0 6px;
  }

  .flavour-name{
    font-size:11.5px;
  }

  .summary-stat-value{
    font-size:24px;
  }

  .money-input{
    font-size:20px;
  }
}

@media(max-width:360px){
  .order-info-grid,
  .report-info-grid{
    grid-template-columns:1fr;
  }
}