@media screen {
/* Approved ui-mac-density-v1-preview.html?density=dense&screen=payment.
 * Load after ui-tokens and existing payment skins. No behavior/visibility changes.
 * Keep the full operational guide, type descriptions, search/add and bank status;
 * these contain more information than the shortened design preview.
 */
#ws-pr-modal,
#pr-vs-modal,
#pr-vendor-add-modal {
  --pr-control:28px;
  font:13px/1.4 var(--ui-font);
  color:var(--ui-text-1);
  background:var(--ui-scrim)!important;
  padding:24px 14px;
}
#ws-pr-modal *,
#pr-vs-modal *,
#pr-vendor-add-modal * { box-sizing:border-box; min-width:0; }
#ws-pr-modal .pr-dense-sheet {
  width:100%; max-width:960px!important; margin:0 auto;
  border:1px solid var(--ui-line); border-radius:var(--ui-radius-panel);
  background:var(--ui-surface); box-shadow:var(--ui-elev-sheet); overflow:hidden;
}
#ws-pr-modal .pr-dense-head { padding:12px 20px; border-bottom:1px solid var(--ui-line); }
#ws-pr-modal .pr-dense-head h3 { font-size:15px!important; font-weight:var(--ui-weight-semibold); margin:0; }
#ws-pr-modal .pr-dense-body { padding:12px 20px 16px!important; max-height:78dvh; overflow-y:auto; }
#ws-pr-modal .pr-dense-body > * + * { margin-top:12px!important; }
#ws-pr-modal .pr-dense-notice {
  padding:8px 10px!important; border:0!important; border-radius:var(--ui-radius-row);
  background:var(--ui-fill-subtle)!important;
}
#ws-pr-modal .pr-dense-notice p { font-size:11px!important; line-height:1.45!important; color:var(--ui-text-2)!important; margin:0; }
#ws-pr-modal .pr-dense-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px;
  padding-top:12px; border-top:1px solid var(--ui-line);
}
#ws-pr-modal .pr-dense-grid > h4 { grid-column:1/-1; margin:0 0 4px!important; font-size:12px!important; font-weight:var(--ui-weight-semibold); }
#ws-pr-modal .pr-dense-contents { display:contents!important; }
#ws-pr-modal .pr-dense-field { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:4px 9px; margin:0!important; }
#ws-pr-modal .pr-dense-field > .ws-label { margin:0!important; font-size:12px!important; font-weight:var(--ui-weight-regular); color:var(--ui-text-2); }
#ws-pr-modal .pr-dense-field > :not(.ws-label):not(input[type="hidden"]) { grid-column:2; }
#ws-pr-modal .pr-dense-field > .ws-label + * { grid-row:1; }
#ws-pr-modal .pr-dense-field .max-w-xs { max-width:none; }
#ws-pr-modal .pr-dense-field .flex { gap:4px; }
#ws-pr-modal .pr-dense-field .flex > input { width:0; min-width:64px; }
#ws-pr-modal .pr-dense-evidence { grid-column:1/-1; margin:4px 0 0!important; padding-top:12px; border-top:1px solid var(--ui-line); }
#ws-pr-modal .pr-dense-evidence > label { margin-bottom:6px; font-size:12px; font-weight:var(--ui-weight-semibold); }
#ws-pr-modal .pr-dense-evidence > div:first-of-type { padding:6px 9px!important; margin-bottom:6px; background:var(--ui-fill-subtle)!important; border:0!important; }
#ws-pr-modal .pr-dense-evidence p { font-size:11px!important; color:var(--ui-text-2)!important; margin:0; }
#ws-pr-modal input:not([type="hidden"]):not([type="file"]),
#ws-pr-modal select,
#ws-pr-modal textarea {
  min-height:var(--pr-control)!important; height:var(--pr-control); padding:4px 8px!important;
  border:0!important; border-radius:var(--ui-radius-control)!important;
  background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important;
  box-shadow:var(--ui-elev-field); font:13px/1.4 var(--ui-font)!important; max-width:100%;
}
#ws-pr-modal textarea { height:58px; resize:vertical; width:100%; }
#ws-pr-modal :is(input,textarea)::placeholder,
body:has(#ws-pr-modal) #ws-vendor-modal input::placeholder { color:var(--ui-text-2)!important; opacity:1; }
#ws-pr-modal button,
#ws-pr-modal .pr-dense-evidence label:has(input[type="file"]) {
  min-height:var(--pr-control)!important; min-width:28px; padding:4px 8px!important;
  font-size:12px!important; border-radius:var(--ui-radius-control)!important;
  background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important;
  border:1px solid var(--ui-line)!important; box-shadow:none;
}
#ws-pr-modal button:disabled { color:var(--ui-text-3)!important; cursor:default; }
#ws-pr-modal #pr-type-btns { gap:2px; padding:2px; background:var(--ui-fill); border-radius:var(--ui-radius-control); }
#ws-pr-modal #pr-type-btns button { padding:3px 5px!important; border:0!important; background:none!important; font-size:12px!important; font-weight:var(--ui-weight-regular); }
#ws-pr-modal #pr-type-btns button span { font-size:11px!important; color:var(--ui-text-2); white-space:nowrap; }
#ws-pr-modal #pr-type-btns .border-blue-500,
#ws-pr-modal #pr-type-btns .border-purple-500,
#ws-pr-modal #pr-type-btns .border-green-500 { background:var(--ui-surface)!important; color:var(--ui-text-1)!important; box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold); }
#ws-pr-modal .pr-dense-money { grid-column:1/-1; margin:4px 0 0!important; padding:12px 0 0!important; border:0!important; border-top:1px solid var(--ui-line)!important; border-radius:0!important; background:none!important; }
#ws-pr-modal .pr-dense-money > label { font-size:12px; font-weight:var(--ui-weight-semibold); margin:0 0 8px; }
#ws-pr-modal .pr-dense-money > .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#ws-pr-modal .pr-dense-money .ws-input { min-height:28px; padding:4px 8px; border-radius:var(--ui-radius-control); font-size:13px; }
#ws-pr-modal #pr-mid-display { background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important; border:0; }
/* Neutral summary like the preview; type is still explicit in selected segment,
 * labels, tax sign and calculation sentence. Preserve JS inline state untouched. */
#ws-pr-modal #pr-total-display { background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important; border:0!important; font-size:18px!important; line-height:1.4; font-weight:var(--ui-weight-semibold); font-variant-numeric:tabular-nums; }
#ws-pr-modal #pr-total-label { color:var(--ui-text-1)!important; }
#ws-pr-modal #pr-calc-info { font-size:11px!important; color:var(--ui-text-2); margin-top:6px; }
#ws-pr-modal .pr-dense-foot { padding:10px 20px!important; gap:8px; background:var(--ui-fill-subtle)!important; border-top:1px solid var(--ui-line); }
#ws-pr-modal #pr-save-btn:not(:disabled) { background:var(--ui-accent)!important; border-color:var(--ui-accent)!important; color:var(--ui-on-accent)!important; }
#ws-pr-modal :is(button,input,select,textarea):focus-visible,
#ws-pr-modal label:has(input[type="file"]:focus-visible) { outline:2px solid var(--ui-accent); outline-offset:2px; box-shadow:var(--ui-focus-ring)!important; }
#ws-pr-modal [class*="text-[10px]"],
#pr-vs-modal [class*="text-[10px]"] { font-size:11px!important; }
#ws-pr-modal .text-gray-400,
#pr-vs-modal .text-gray-400,
#pr-vendor-add-modal .text-gray-400 { color:var(--ui-text-2)!important; }
#pr-vs-modal > div,
#pr-vendor-add-modal > div,
body:has(#ws-pr-modal) #ws-vendor-modal > div {
  background:var(--ui-surface)!important; border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius-sheet)!important; box-shadow:var(--ui-elev-sheet)!important;
}
#pr-vs-modal input,
#pr-vs-modal button,
#pr-vendor-add-modal button,
body:has(#ws-pr-modal) #ws-vendor-modal :is(input,select,button) { min-height:28px; font:13px/1.4 var(--ui-font); }
#pr-vs-modal input { background:var(--ui-fill-subtle); border:0; box-shadow:var(--ui-elev-field); }
#pr-vs-modal button,
#pr-vendor-add-modal button { border-radius:var(--ui-radius-control)!important; background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important; }
#pr-vs-modal #pr-vs-tabs .bg-blue-600 { background:var(--ui-surface)!important; box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold); }
#pr-vs-modal #pr-vs-list button { padding:7px 10px; border-bottom:1px solid var(--ui-line); }
#pr-vs-modal #pr-vs-list button > span:first-child { background:var(--ui-fill)!important; color:var(--ui-text-2)!important; }
#pr-vs-modal :is(button,input):focus-visible,
#pr-vendor-add-modal button:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
#ws-pr-modal #pr-vendor-dropdown [style*="font-size:9px"],
#ws-pr-modal #pr-vendor-dropdown [style*="font-size:10px"] { font-size:11px!important; color:var(--ui-text-2)!important; }
#ws-pr-modal #pr-vendor-dropdown b { color:var(--ui-accent)!important; }
body:has(#ws-pr-modal) #ws-vendor-modal { --pr-control:28px; background:var(--ui-scrim)!important; font:13px/1.4 var(--ui-font); }
body:has(#ws-pr-modal) #ws-vendor-modal > div > div:first-child { padding:12px 16px!important; }
body:has(#ws-pr-modal) #ws-vendor-modal > div > div:nth-child(2) { padding:12px 16px!important; }
body:has(#ws-pr-modal) #ws-vendor-modal > div > div:last-child { padding:10px 16px!important; background:var(--ui-fill-subtle)!important; }
body:has(#ws-pr-modal) #ws-vendor-modal :is(h3,label) { color:var(--ui-text-1)!important; font-weight:var(--ui-weight-semibold)!important; }
body:has(#ws-pr-modal) #ws-vendor-modal .ws-label { font-size:11px!important; }
body:has(#ws-pr-modal) #ws-vendor-modal h3 i { color:var(--ui-text-2)!important; }
body:has(#ws-pr-modal) #ws-vendor-modal :is(input:not([type="hidden"]):not([type="file"]),select) { min-height:var(--pr-control)!important; height:var(--pr-control); padding:4px 8px!important; border:0!important; border-radius:var(--ui-radius-control)!important; background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important; box-shadow:var(--ui-elev-field); font:13px/1.4 var(--ui-font)!important; }
body:has(#ws-pr-modal) #ws-vendor-modal button { min-height:var(--pr-control)!important; padding:4px 8px!important; font:13px/1.4 var(--ui-font)!important; background:var(--ui-fill-subtle)!important; color:var(--ui-text-1)!important; border:1px solid var(--ui-line)!important; border-radius:var(--ui-radius-control)!important; }
body:has(#ws-pr-modal) #ws-vendor-modal #vnd-save-btn { background:var(--ui-accent)!important; color:var(--ui-on-accent)!important; border-color:var(--ui-accent)!important; }
body:has(#ws-pr-modal) #vnd-biz-section > div:first-child { background:var(--ui-fill-subtle)!important; border:0!important; padding:10px!important; }
body:has(#ws-pr-modal) #vnd-biz-section > div:first-child > div:first-child > span:first-child { display:none; }
body:has(#ws-pr-modal) #vnd-upload-label { padding:12px!important; border:1px dashed var(--ui-line-dashed)!important; }
body:has(#ws-pr-modal) #vnd-upload-label :is(i,span) { color:var(--ui-text-2)!important; }
body:has(#ws-pr-modal) #vnd-upload-label i { font-size:20px!important; }
body:has(#ws-pr-modal) #vnd-contact-list [data-vnd-contact-row],
body:has(#ws-pr-modal) #vnd-common-section > div { background:var(--ui-surface)!important; border:0!important; padding:0!important; }
@media (max-width:768px) {
  #ws-pr-modal,
  #pr-vs-modal,
  #pr-vendor-add-modal { --pr-control:44px; padding:8px; }
  #ws-pr-modal .pr-dense-sheet { margin:0; }
  #ws-pr-modal .pr-dense-head { padding:10px 12px; }
  #ws-pr-modal .pr-dense-body { padding:12px!important; max-height:calc(100dvh - 144px); }
  #ws-pr-modal .pr-dense-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  #ws-pr-modal .pr-dense-field { grid-template-columns:91px minmax(0,1fr); gap:4px 8px; }
  #ws-pr-modal .pr-dense-field .flex:has(#pr-vendor-input) { flex-wrap:wrap; }
  #ws-pr-modal #pr-vendor-input { flex-basis:100%; width:100%; }
  #ws-pr-modal .pr-dense-field:has(> #pr-type-btns) { grid-template-columns:minmax(0,1fr); }
  #ws-pr-modal #pr-type-btns { grid-column:1; grid-row:2; flex-wrap:nowrap; }
  #ws-pr-modal #pr-type-btns button { flex:1 1 0; min-height:44px!important; }
  #ws-pr-modal #pr-type-btns br { display:block; }
  #ws-pr-modal #pr-type-btns span { margin-left:0; }
  #ws-pr-modal .pr-dense-money > .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:start; }
  #ws-pr-modal #pr-input-wrap { grid-column:1/-1; }
  #ws-pr-modal .pr-dense-money .ws-input { min-height:44px; }
  #ws-pr-modal .pr-dense-evidence label:has(input[type="file"]) { display:inline-flex; align-items:center; max-width:100%; overflow-wrap:anywhere; }
  #ws-pr-modal .pr-dense-foot { padding:8px 12px max(8px,env(safe-area-inset-bottom))!important; }
  #ws-pr-modal #pr-vendor-badge button { min-width:44px; }
  #pr-vs-modal > div { margin:0; }
  #pr-vs-modal :is(input,button),
  #pr-vendor-add-modal button,
  body:has(#ws-pr-modal) #ws-vendor-modal :is(input,select,button) { min-height:44px!important; min-width:44px; }
  #pr-vs-modal #pr-vs-list button { flex-wrap:wrap; gap:6px; }
  #pr-vs-modal #pr-vs-list button > .flex-1 { flex-basis:60%; }
  body:has(#ws-pr-modal) #ws-vendor-modal { --pr-control:44px; padding:8px!important; }
  body:has(#ws-pr-modal) #vnd-contact-list [data-vnd-contact-row] > div:last-child { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body:has(#ws-pr-modal) #vnd-contact-list [data-vnd-contact-row] > div:last-child > div:first-child { grid-column:1/-1; }
}

}