/* Clean light POS-style UI */
:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --card2:#ffffff;
  --stroke:rgba(20,20,25,.12);
  --text:#111114;
  --muted:rgba(20,20,25,.65);
  --muted2:rgba(20,20,25,.5);
  --gold:#caa85a;
  --green:#0f9d58;
  --danger:#b3261e;
  --shadow: 0 12px 35px rgba(0,0,0,.08);
  --radius:18px;
  --radius2:14px;
  --pad:16px;
  --max:760px;
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 50% -20%, rgba(202,168,90,.28), transparent 58%),
              radial-gradient(900px 600px at 10% 20%, rgba(0,0,0,.04), transparent 60%),
              var(--bg);
  color:var(--text);
}
.wrap{max-width:var(--max); margin:0 auto; padding:18px 16px 44px;}
.hero{padding:6px 0 10px}
.brand{display:flex; align-items:center; gap:12px; margin-bottom: 12px;}
.appicon{
  width:56px;height:56px;border-radius:14px;
  background:
    radial-gradient(18px 18px at 65% 30%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(40px 40px at 50% 120%, rgba(202,168,90,.22), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(0,0,0,.05));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.brandtext h1{font-size:28px;margin:0;letter-spacing:.2px}
.sub{margin:2px 0 0; color:var(--muted); font-size:13px}
.segmented{display:flex; gap:10px; margin: 14px 0 14px;}
.seg{
  flex:1; padding:12px 12px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.7);
  color:var(--text);
  font-weight: 700;
}
.seg.on{
  border-color: rgba(202,168,90,.9);
  box-shadow: 0 0 0 2px rgba(202,168,90,.16) inset;
}
.totalCard{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(0,0,0,.02));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  text-align:center;
}
.totalAmt{font-size:46px;font-weight: 900;color: var(--green); letter-spacing:.2px}
.totalLbl{margin-top:6px;color:var(--muted);font-size:13px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(0,0,0,.01));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.modeRow{display:flex;justify-content:center;margin-bottom: 10px}
.pillTabs{
  display:flex; gap:10px; background: rgba(0,0,0,.02);
  border:1px solid var(--stroke); border-radius:999px; padding:6px;
}
.pillTabs.small{padding:4px}
.pill{
  border:0; border-radius:999px; padding:10px 16px;
  background: transparent; color: var(--text); font-weight: 800;
}
.pillTabs.small .pill{padding:8px 12px}
.pill.on{
  background: rgba(202,168,90,.18);
  outline: 1px solid rgba(202,168,90,.65);
}
.hint{margin: 8px 0 12px; color: var(--muted); font-size: 13px}
.field{margin: 14px 0}
label{display:block;margin-bottom: 8px;color: var(--muted);font-weight: 800;letter-spacing:.2px}
input, select{
  width:100%; padding: 14px 14px; border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline:none;
}
select{
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
                    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 6px), calc(100% - 14px) calc(1em + 6px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.row{display:flex; gap:10px; align-items:center}
.selectRow{margin-bottom:10px}
.ghost{
  width:100%; padding: 12px 14px; border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.03);
  color: var(--text);
  font-weight: 800;
}
.ghost.small{width:auto; padding:10px 12px; border-radius:12px}
button{cursor:pointer}
.chip{
  flex:1; padding: 12px 0; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.03);
  color: var(--text);
  font-weight: 900;
}
.selectedChip{
  margin-top:10px; display:inline-block; padding: 10px 12px;
  border-radius:999px; border:1px solid var(--stroke);
  background: rgba(0,0,0,.02); color: var(--muted); font-weight: 800;
}
.tiny{font-size:12px;margin-top:8px}
.muted{color:var(--muted)}
.divider{height:1px;background: var(--stroke);margin: 18px 0}
.section{margin: 14px 0 8px; font-size:13px; letter-spacing:.8px; text-transform: uppercase; color: rgba(20,20,25,.65)}
.field.icon{position:relative}
.field.icon .ico{
  position:absolute; left: 12px; top: 44px;
  width: 36px; height: 36px; display:flex; align-items:center; justify-content:center;
  opacity:.85; background: rgba(0,0,0,.03);
  border:1px solid var(--stroke); border-radius: 12px;
}
.field.icon input, .field.icon select{padding-left:60px}
.fileRow{display:flex; gap:10px; align-items:center}
.fileRow input[type=file]{padding: 10px; border-radius: 14px}
.badge{
  display:inline-block; margin-top: 10px; padding: 10px 12px;
  border-radius:999px; border:1px solid rgba(202,168,90,.55);
  background: rgba(202,168,90,.14);
  color: rgba(20,20,25,.85);
  font-weight: 900; font-size:12px;
}
.actions{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px;}
.primary{
  padding: 14px 14px; border-radius: 16px; border:0;
  color:#1b1b1b; font-weight: 900;
  background: linear-gradient(90deg, rgba(202,168,90,1), rgba(255,190,130,1));
}
.danger{
  padding: 14px 14px; border-radius: 16px;
  border:1px solid rgba(179,38,30,.35);
  background: rgba(179,38,30,.08);
  color: rgba(20,20,25,.9);
  font-weight: 900;
}
.tableWrap{overflow:auto; border-radius: 14px; border:1px solid var(--stroke); background: rgba(255,255,255,.92)}
.itemsTable{width:100%; border-collapse:collapse; min-width: 980px}
.itemsTable th, .itemsTable td{padding: 12px 10px; border-bottom:1px solid var(--stroke); font-size:12px; white-space:nowrap}
.itemsTable th{color: rgba(20,20,25,.62); text-align:left; letter-spacing:.8px}
.itemsTable td{color: rgba(20,20,25,.92)}
.itemsTable td .miniBtn{
  padding: 8px 10px; border-radius: 10px;
  border:1px solid rgba(20,20,25,.12);
  background: rgba(0,0,0,.03);
  color: rgba(20,20,25,.92);
  font-weight: 900;
}
.formula{margin-top: 10px; font-size:12px; text-align:center}
.foot{display:flex;justify-content:center;gap:10px;margin-top: 14px;font-size:12px}
.dot{opacity:.5}

/* Thumbnails (app table) */
.thumb{
  width:44px;height:44px;border-radius:10px;
  border:1px solid rgba(20,20,25,.12);
  background: rgba(0,0,0,.03);
  object-fit: cover;
  display:block;
}

details.fold{margin: 12px 0; border:1px solid var(--stroke); border-radius: 14px; background: rgba(0,0,0,.02); padding: 10px 12px;}
details.fold > summary{cursor:pointer; font-weight: 900; color: rgba(20,20,25,.75); list-style:none;}
details.fold > summary::-webkit-details-marker{display:none}
details.fold .inside{padding-top: 8px}

.toast{
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(20,20,25,.88);
  border:1px solid rgba(255,255,255,.18);
  padding: 10px 12px; border-radius: 999px;
  color: rgba(255,255,255,.95);
  font-weight: 900; font-size: 12px;
  opacity: 0; pointer-events:none; transition: opacity .25s ease;
}
.toast.show{opacity:1}
@media (max-width: 520px){
  .totalAmt{font-size:38px}
  .actions{grid-template-columns: 1fr}
}