:root{
  --bg:#f6fbfb;
  --panel:#ffffff;
  --accent:#2aa198;
  --accent-2:#f39c12;
  --muted:#6b7280;
  --danger:#e05555;
  --glass: rgba(0,0,0,0.04);
}
*{box-sizing:border-box;font-family:Inter,Segoe UI,Arial,sans-serif}
body{margin:0;background:linear-gradient(180deg,var(--bg),#eef7f6);color:#122}
.cm-app{max-width:1200px;margin:18px auto;padding:14px}
.cm-header{display:flex;align-items:center;justify-content:space-between;padding:12px 6px}
.cm-header h1{margin:0;color:var(--accent)}
.cm-actions button{margin-left:8px;padding:8px 12px;border-radius:6px;border:0;background:var(--panel);box-shadow:0 1px 2px var(--glass);cursor:pointer}
.cm-actions button:hover{transform:translateY(-1px)}
.cm-actions .danger{background:linear-gradient(90deg,#fff6f6,#ffecec);border:1px solid var(--danger);color:var(--danger)}
.cm-main{display:flex;gap:18px}
.cm-list{width:320px;background:var(--panel);padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(12,38,36,0.06)}
.cm-list input{width:100%;padding:8px;border-radius:8px;border:1px solid var(--glass);margin-bottom:10px}
#customers{list-style:none;padding:0;margin:0;max-height:64vh;overflow:auto}
#customers li{padding:10px;border-radius:8px;margin-bottom:6px;cursor:pointer;border:1px solid transparent}
#customers li:hover{background:linear-gradient(90deg,#f7fffe,#f0fbfa)}
#customers li.active{background:linear-gradient(90deg,#eaf9f8,#dff2f1);border-color:var(--accent)}
#customers li .cust-line.inactive{opacity:0.6;color:#999}
.cust-line{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cust-title{display:flex;flex-direction:column}
.cust-title .main{font-weight:700;color:#0b3b38}
.cust-title .sub{font-size:12px;color:var(--muted)}
.cust-balance{font-weight:700;padding:6px 10px;border-radius:8px;background:linear-gradient(180deg,#fff,#f7fffd);border:1px solid var(--glass)}
.cust-balance.pos{color:green}
.cust-balance.neg{color:var(--danger);background:linear-gradient(180deg,#fff6f6,#fff)}
.cm-form{flex:1;background:var(--panel);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(12,38,36,0.04)}
.row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.row.small{align-items:center}
.row label{min-width:110px;color:var(--muted);font-size:14px}
.row input,.row select,.row textarea{flex:1;padding:8px;border-radius:8px;border:1px solid var(--glass);background:#fff}
.row textarea{resize:vertical}
.status{margin-top:10px;padding:8px;border-radius:8px;color:var(--muted);font-size:13px}
.cm-actions button{background:linear-gradient(180deg,#fff,#f7fffd)}
@media (max-width:880px){.cm-main{flex-direction:column}.cm-list{width:100%}}
/* On tablet screens make the right pane effectively 10% narrower by increasing left list width */
@media (min-width:881px) and (max-width:1200px) {
  .cm-main { align-items: flex-start; }
  .cm-list { width: 352px; }
  .cm-form { transform: none; }
  /* Reduce spacing and control sizes ~10% for better fit on tablets */
  .cm-form { padding: 14px; }
  .cm-form .row { gap: 9px; }
  .cm-form .row label { min-width: 99px; }
  .cm-form .row input,
  .cm-form .row select,
  .cm-form .row textarea { padding: 7px; font-size: 0.9rem; }
  .cm-main { gap: 12px; }
}