/* same styles */
.np-wrap { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:#0b1b22; }
.np-title { text-align:center; margin: 16px 0 4px; color:#0b1b22; font-size:44px; }
.np-subtitle { text-align:center; color:#6a7a83; margin-bottom: 20px; font-size:20px; }
.np-layout { display:grid; grid-template-columns: 1fr 380px; gap:24px; align-items:start; }
@media (max-width: 960px){ .np-layout { grid-template-columns: 1fr; } }
.np-right { position: sticky; top: 16px; }
.np-card { background:#fff; border:1px solid #e6edf2; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.02); padding:16px; }
.np-summary h3 { margin:0 0 8px; }
.np-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
.np-row.positive { color:#16a34a; }
.np-row.total { font-weight:700; font-size:16px; }
.np-cta-col { display:grid; gap:10px; margin-top:12px; }
.np-btn { border-radius:10px; padding:12px 14px; border:1px solid transparent; cursor:pointer; font-weight:600; }
.np-btn-primary { background:#0b2530; color:#fff; } .np-btn-outline { background:#fff; color:#0b2530; border-color:#d6e2e8; } .np-btn-muted { background:#eef3f6; color:#0b2530; }
.np-ico { margin-right:8px; } .np-hint { display:block; margin-top:8px; color:#6a7a83; }

.np-group-title { font-size:20px; margin:18px 0 8px; } .np-list { display:flex; flex-direction:column; gap:10px; }
.np-item { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; background:#fff; border:1px solid #e6edf2; border-radius:10px; padding:12px; }
.np-item-left .np-name { font-weight:600; } .np-item-left .np-meta { color:#6a7a83; font-size:13px; white-space:normal; }
.np-item-right { display:flex; align-items:center; gap:8px; } .np-qty { width:100px; padding:8px; border:1px solid #ccd8df; border-radius:8px; }
.np-item-subtotal { font-weight:700; color:#0b1b22; min-width:120px; text-align:right; }

.np-modal { position:fixed; inset:0; z-index:10000; } .np-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.np-modal-content { position:relative; z-index:1; max-width:640px; margin:8vh auto; background:#fff; border-radius:12px; padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.np-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .np-modal-grid label { display:flex; flex-direction:column; font-size:14px; color:#0b1b22; }
.np-modal-grid input, .np-modal-grid textarea { margin-top:6px; padding:10px; border:1px solid #ccd8df; border-radius:8px; } .np-span-2 { grid-column: span 2; }
.np-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } .np-modal h3 { margin:0 0 12px; }



/* --- Mobile polish (append) --- */
@media (max-width:599px){
  .np-item{ display:grid; grid-template-columns:1fr; gap:8px; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
  .np-item-left{ order:1; }
  .np-item-right{ order:2; justify-content:flex-start; flex-wrap:wrap; }
  .np-item-subtotal{ order:3; text-align:left; font-weight:700; }
  .np-qty{ width: clamp(84px, 40vw, 140px); padding:10px; }
  input[type="checkbox"]{ width:22px; height:22px; }
  .np-group-title{ margin-top:8px; margin-bottom:10px; }
}

/* Two-column layout for larger screens */
@media (min-width:768px){
  .np-layout{ display:grid; grid-template-columns: minmax(0,1fr) minmax(260px, 380px); gap:24px; align-items:start; }
  .np-right{ position: sticky; top: 16px; }
}



/* --- Modal fixes (append) --- */
body.np-modal-open{ overflow:hidden; touch-action:none; }
#np-modal{ position:fixed; inset:0; z-index:99999; display:none; }
#np-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
#np-modal .np-modal-content{ position:relative; z-index:1; max-width: clamp(320px, 92vw, 640px); margin: 8vh auto; background:#fff; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.25); padding:16px; max-height:84vh; overflow:auto; }
.np-modal-actions{ display:flex; gap:10px; justify-content:space-between; }
.np-modal-actions .np-btn{ flex:1 1 0; }