.pa-surface {
  --pa-paper: #fff;
  --pa-ink: #242622;
  --pa-muted: #62655f;
  --pa-line: #e5e6df;
  --pa-soft: #f7f7f3;
  --pa-yellow: #f6cb19;
  --pa-error: #a72f22;
  color: var(--pa-ink);
  background: var(--pa-paper);
  font-size: var(--ui-text-size, 12px);
  line-height: 1.5;
  color-scheme: light;
}
.pa-surface.pa-library-page { background: transparent; }
/* The standalone library shares the resource page's viewport, fixed corners,
 * scrollbar rail and masonry breakpoints; editor/picker cards stay unchanged. */
.pa-library-page > .pa-header { flex: none; }
.pa-library-page.material-library .rl-grid { --rl-gap: 2px; }
.pa-library-page.material-library .rl-card { border-radius: 0; }
.pa-library-page button.library-create { padding: 0; border: 0; border-radius: 0; background: #f1f2ee; color: #62695f; }
.pa-library-page button.library-cover { position: relative; display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
.pa-library-page .pa-library-card .pa-cover { display: block; min-height: 0; }
.pa-library-page .pa-library-card .pa-cover.is-empty { display: grid; aspect-ratio: 3 / 4; min-height: 80px; background: var(--pa-soft); }
.pa-library-caption { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 0 12px 4px; background: transparent; color: #000; text-align: left; pointer-events: none; }
.pa-library-name, .pa-library-meta { display: block; justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.pa-library-caption [data-ink=black] { color: #000; }
.pa-library-caption [data-ink=white] { color: #fff; }
.pa-library-name { font-weight: 600; }
.pa-library-meta { font-weight: 400; }
.pa-library-page button.library-cover:focus-visible { outline: 2px solid #fff !important; outline-offset: -3px; }
.pa-library-page .rl-results > .pa-actions { padding: 16px 0; }
.pa-library-page .rl-grid button:focus-visible { outline-offset: -3px; }
.pa-library-page button.rl-back-top { padding: 0; min-height: 0; border-radius: 50%; }
.pa-header, .pa-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pa-header { margin-bottom: 24px; }
.pa-header h1, .pa-header h2 { margin: 0; }
.pa-header p { margin: 6px 0 0; color: var(--pa-muted); }
.pa-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.pa-surface button, .pa-surface .pa-link { min-height: 44px; padding: 10px 14px; border: 1px solid var(--pa-line); border-radius: 10px; background: var(--pa-paper); color: var(--pa-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.pa-surface button:hover:not(:disabled), .pa-surface .pa-link:hover { background: var(--pa-soft); border-color: #a8aba2; }
.pa-surface button:active:not(:disabled), .pa-surface .pa-link:active { transform: scale(.98); transition-duration: 90ms; }
.pa-surface button.pa-primary { background: var(--pa-yellow); border-color: var(--pa-yellow); }
.pa-surface button.pa-primary:hover:not(:disabled) { background: var(--pa-yellow); }
.pa-surface button:hover:not(:active):not(:disabled), .pa-surface .pa-link:hover:not(:active) { transform: none; }
.pa-surface button.pa-primary:active:not(:disabled) { transform: scale(.98); }
.pa-surface button:disabled { opacity: .5; cursor: not-allowed; }
.pa-surface :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--pa-ink); outline-offset: 3px; }
.pa-surface :is(input, select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #b5b8af; border-radius: 8px; background: var(--pa-paper); color: var(--pa-ink); font: inherit; }
.pa-surface textarea { min-height: 64px; height: 64px; resize: vertical; }
.pa-surface label { display: grid; align-content: start; gap: 6px; color: var(--pa-ink); }
.pa-surface small { color: var(--pa-muted); }
.material-library .rl-card .pa-cover{aspect-ratio:auto;border-radius:0;background:transparent;min-height:80px}
.material-library .rl-card .pa-cover img{height:auto;max-height:none}
.pa-product-list .pa-product-row{display:block;position:relative;border-radius:12px}
.pa-product-picker .pa-product-list .pa-product-select{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;gap:0;text-align:left}
.pa-product-list .pa-product-thumb{display:block;flex:none;width:100%;height:auto;min-height:80px;border-radius:0;background:transparent}
.pa-product-list .pa-product-thumb img{width:100%;height:auto;object-fit:contain}
.pa-product-picker .library-create{border:0;background:var(--pa-soft);border-radius:12px;padding:16px;gap:12px}
.pa-cover { display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; border-radius: 10px; background: var(--pa-soft); overflow: hidden; }
.pa-cover img { width: 100%; height: 100%; object-fit: contain; }
.pa-error { padding: 12px 14px; background: #fff3f0; border-radius: 8px; color: var(--pa-error); overflow-wrap: anywhere; }
.pa-notice { padding: 12px 14px; background: var(--pa-soft); border-radius: 8px; }
dialog.pa-dialog { position: fixed; inset: 0; width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--pa-line); border-radius: 18px; box-shadow: 0 20px 80px #24262226; overflow: auto; overscroll-behavior: contain; }
dialog.pa-dialog::backdrop { background: #24262255; }
.pa-dialog-content { padding: 24px; }
.pa-dialog .pa-close { flex: 0 0 auto; width: 44px; padding: 10px; }
.pa-form { display: grid; gap: 16px; }
.pa-editor-dialog { --pa-field-line: #dfe1db; }
.pa-editor-dialog :is(input, select, textarea, .ui-select-trigger) { border-color: var(--pa-field-line); }
.pa-editor-dialog button.pa-cancel { color: var(--pa-muted); }
.pa-editor-dialog button.pa-cancel:hover:not(:disabled) { color: #000; border-color: #000; }
.pa-form fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.pa-form legend { margin-bottom: 12px; font-weight: 600; }
.pa-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pa-identity { grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; }
.pa-angle-strip { display:grid; grid-template-columns:repeat(8,minmax(85px,1fr)); gap:12px; overflow-x:auto; padding:14px 4px;  }
.pa-angle-item { display:grid; justify-items:center; align-content:start; gap:8px; white-space:nowrap; }
.pa-surface button.pa-angle-upload { position:relative; width:61px; height:75px; min-height:75px; padding:0; }
.pa-angle-images{display:grid;gap:20px}
.pa-angle-media{position:relative;width:61px;height:75px}
.pa-surface button.pa-angle-remove{position:absolute;right:-12px;top:-12px;z-index:1;display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;opacity:0;pointer-events:none}
.pa-surface button.pa-angle-remove::before{content:"";position:absolute;width:20px;height:20px;box-sizing:border-box;border:1px solid var(--pa-line);border-radius:50%;background:#fff;pointer-events:none}
.pa-surface button.pa-angle-remove .ds-hint-icon{position:relative}
.pa-surface button.pa-angle-remove:hover:not(:disabled){background:transparent}
.pa-angle-media:is(:hover,:focus-within) button.pa-angle-remove{opacity:1;pointer-events:auto}
@media(hover:none){.pa-angle-media button.pa-angle-remove{opacity:1;pointer-events:auto}}
.pa-basic-measurements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pa-measurement-input { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:6px; }
dialog.pa-dialog.pa-dialog-compact { width:min(440px,calc(100vw - 32px)); }
.pa-basic-measurements label, .pa-identity label { min-width:0; }
.pa-surface .ui-select-trigger { justify-content: space-between; text-align: left; }
.pa-conditions { display: flex; gap: 16px; flex-wrap: wrap; }
.pa-conditions label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.pa-conditions input { width: 18px; min-height: 18px; accent-color: var(--pa-yellow); }
.pa-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pa-slot { min-width: 0; padding: 12px; border: 1px solid var(--pa-line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.pa-slot h3 { margin: 0; }
.pa-slot small { display: block; }
.pa-slot .pa-slot-help { flex: 1; margin: 0; color: var(--pa-muted); }
.pa-slot .pa-cover { aspect-ratio: 1; }
.pa-slot .pa-actions { gap: 6px; }
.pa-slot .pa-actions button { flex: 1; padding: 8px; }
.pa-readiness { padding: 16px; border: 1px solid var(--pa-line); border-radius: 12px; }
.pa-readiness h3 { margin: 0 0 8px; }
.pa-readiness p { margin: 6px 0; }
.pa-missing { padding-left: 20px; margin: 12px 0 0; color: var(--pa-muted); }
.pa-missing li { margin: 4px 0; }
.pa-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 16px; border-top: 1px solid var(--pa-line); }
.pa-footer p { max-width: 560px; margin: 0; color: var(--pa-muted); }
.pa-editor-dialog .pa-footer > .pa-actions { display: grid; grid-template-columns: repeat(2, minmax(88px, 1fr)); }
.pa-angle-item > .pa-error { white-space: normal; padding: 4px; max-width: 100px; }
.pa-preview { width: 100%; max-height: 65dvh; object-fit: contain; border-radius: 10px; background: var(--pa-soft); }
.pa-pinned { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pa-product-picker { position: fixed; inset: auto; margin: 0; box-sizing: border-box; padding: 8px; border: 1px solid var(--pa-line); border-radius: 18px; box-shadow: 0 14px 42px #2426221a; overflow: visible; }
.pa-product-picker:popover-open { display: flex; flex-direction: column; animation: pa-picker-reveal 160ms ease-out; }
.pa-product-picker button { border: 0; background: transparent; font-weight: 400; }
.pa-product-picker button:hover:not(:disabled) { background: var(--pa-soft); }
.pa-product-picker button:focus-visible { outline: 2px solid var(--pa-ink); outline-offset: -2px; }
.pa-product-picker .pa-product-create { flex: 0 0 auto; justify-content: flex-start; width: 100%; padding: 12px; gap: 12px; min-height: 48px; }
.pa-product-list { min-height: 0; overflow: auto; overscroll-behavior: contain;   scroll-padding: 4px; }
.pa-product-row { display: flex; align-items: center; gap: 2px; border-radius: 12px; min-width: 0; transition: background-color 160ms ease; }
.pa-product-row:hover, .pa-product-row:focus-within { background: var(--pa-soft); }
.pa-product-picker .pa-product-select { flex: 1; min-width: 0; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 10px 4px 10px 10px; text-align: left; }
.pa-product-thumb { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; background: #f0f1ec; border-radius: 9px; color: var(--pa-muted); }
.pa-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pa-product-picker .pa-product-load { width: 100%; color: var(--pa-muted); }
.pa-picker-message { display: block; margin: 0; padding: 8px 12px; color: var(--pa-muted); overflow-wrap: anywhere; font-size: var(--ui-secondary-size, 10px); }
/* Match the All-material upload tiles, independent of source-image dimensions. */
.pa-product-grid{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px;align-items:flex-start}
.pa-product-item>.pa-product-tile,.pa-product-picker .pa-product-create{position:relative;box-sizing:border-box;width:100%;height:var(--conversation-material-height,144px);margin-inline:auto;border-radius:var(--material-upload-radius,10px);overflow:hidden}
.pa-product-item>.pa-product-tile{overflow:visible}
.pa-product-picker .pa-product-grid>.pa-product-item{flex:0 0 var(--conversation-material-width,115px);width:var(--conversation-material-width,115px);min-width:0;margin:0}
.pa-product-picker .pa-product-grid .pa-product-create{display:grid;place-items:center;place-content:center;min-height:0;padding:0;border:0;box-shadow:none;background:var(--iw-soft,#f1f2ed);color:var(--iw-muted,#62695f)}
.pa-product-caption{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:8px;text-align:center;color:var(--iw-muted,#62695f)}
.pa-product-picker .pa-product-tile .pa-product-select{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;overflow:hidden}
.pa-product-edit-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / 50%);color:#fff;opacity:0;pointer-events:none;transition:opacity 180ms ease}
.pa-product-select:is(:hover,:focus-visible) .pa-product-edit-overlay{opacity:1}
.pa-product-picker .pa-product-tile .pa-product-remove{position:absolute;right:-12px;top:-12px;z-index:2;display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;opacity:0;pointer-events:none}
.pa-product-picker .pa-product-remove::before{content:"";position:absolute;width:20px;height:20px;box-sizing:border-box;border:1px solid var(--pa-line);border-radius:50%;background:#fff;pointer-events:none}
.pa-product-remove .ds-hint-icon{position:relative}
.pa-product-picker .pa-product-remove .ds-hint-icon svg{width:calc(34px / 3);height:calc(34px / 3)}
.pa-product-picker .pa-product-tile .pa-product-remove:hover:not(:disabled){background:transparent}
.pa-product-picker .pa-product-tile:is(:hover,:focus-within) .pa-product-remove{opacity:1;pointer-events:auto}
@media(hover:none){.pa-product-picker .pa-product-tile .pa-product-remove{opacity:1;pointer-events:auto}}
.pa-product-tile .pa-product-thumb{display:block;width:100%;height:100%;min-height:0;border-radius:inherit}
.pa-product-tile .pa-product-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pa-product-picker .pa-product-tile .iw-case-select{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;opacity:0;pointer-events:none;background:transparent}
.pa-product-picker .pa-product-tile:is(:hover,:has(:focus-visible)) .iw-case-select{opacity:1;pointer-events:auto}
@media(hover:none){.pa-product-picker .pa-product-tile .iw-case-select{opacity:1;pointer-events:auto}}
.pa-product-picker .pa-product-tile .iw-case-select[aria-pressed=false]>span{border-color:#fff;background:#0002}
@keyframes pa-picker-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .pa-product-picker:popover-open { animation: none; }
  .pa-product-row { transition: none; }
  .pa-product-edit-overlay{transition:none}
}
.pa-surface .pa-pinned button { padding: 6px 10px; }
@media (max-width: 800px) {
  .pa-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pa-basic-measurements { grid-template-columns:minmax(0,1fr); }
  .pa-header { align-items: flex-start; gap: 12px; }
  .pa-fields { grid-template-columns: minmax(0, 1fr); }
  .pa-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-identity > label:first-child { grid-column: 1 / -1; }
  dialog.pa-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .pa-dialog-content { padding: 16px; }
  .pa-slots { gap: 8px; }
  .pa-slot { padding: 8px; }
  .pa-footer .pa-actions { width: 100%; }
  .pa-footer .pa-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-surface button, .pa-surface .pa-link { transition: none; }
  .pa-surface button:is(:hover, :active):not(:disabled), .pa-surface .pa-link:active { transform: none; }
}