/* Only active when a local image exists; ordinary search styling stays intact. */
.background-modal-open { overflow: hidden; }
/* Browser toolbar movement must not resize/re-rasterize the fixed image. */
.user-background-layer { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; background-repeat: no-repeat; transform: translateZ(0); }
.user-background-layer[hidden] { display: none; }
body.has-user-background > .container { position: relative; z-index: 1; background: rgba(255,255,255,var(--background-ui-alpha,.8)); }
body.dark-mode.has-user-background > .container { background: rgba(30,30,30,var(--background-ui-alpha,.8)) !important; }
body.has-user-background :is(.character-search-wrapper,.theme-group-wrapper,.user-icons-wrapper,.ug-library,.search-summary) { background-color: transparent; }
body.dark-mode.has-user-background :is(.character-search-wrapper,.theme-group-wrapper,.user-icons-wrapper,.ug-library,.search-summary) { background-color: transparent; }
/* Override cell backgrounds as well as rows, including the original zebra rule. */
body.has-user-background.transparent-result-table .results-grid-table,
body.has-user-background.transparent-result-table .results-grid-table :is(thead,tbody,tfoot,tr,th,td,.rg-filter-input,.rg-filter-select),
body.has-user-background.transparent-result-table .results-grid-table tbody tr:nth-child(n) td { background-color: transparent; }
body.has-user-background .sticky-search-header { background: rgba(255,255,255,var(--background-ui-alpha,.8)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.dark-mode.has-user-background .sticky-search-header { background: rgba(30,30,30,var(--background-ui-alpha,.8)) !important; }
body.has-user-background :is(.character-search-summary,.position-filter,.position-filter input[type="text"],.position-filter select,.site-footer,.site-footer .footer-links a) { background-color: transparent; }
body.dark-mode.has-user-background :is(.character-search-summary,.position-filter,.position-filter input[type="text"],.position-filter select,.site-footer,.site-footer .footer-links a) { background-color: transparent; }
.site-intro { position: relative; }
.background-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; margin: 0 0 1rem; border: 1px solid #cfd8e3; border-radius: 0; background: #fff; color: #333; font: inherit; font-size: .85rem; cursor: pointer; }
.background-open:hover { background: #f8fafc; }
.background-open:focus-visible,.background-dialog :is(button,input,select,.background-crop):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body.dark-mode .background-open { background: #2a2a2a; color: #e5e7eb; border-color: #555; }
.background-dialog { --bg-panel: #fff; --bg-panel-soft: #f5f5f5; --bg-text: #333; --bg-muted: #666; --bg-border: #ccc; --bg-primary: var(--primary); --bg-button-text: #fff; width: min(860px,calc(100vw - 32px)); max-width: none; max-height: min(880px,calc(100dvh - 32px)); padding: 0; border: 1px solid var(--bg-border); border-radius: 0; background: var(--bg-panel); color: var(--bg-text); box-shadow: var(--shadow); overflow: hidden; font-family: inherit; font-size: 15px; }
.background-dialog[open] { display: flex; flex-direction: column; }
.background-dialog::backdrop { background: rgba(0,0,0,.35); }
.background-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 2px solid var(--bg-primary); flex-shrink: 0; }
.background-dialog-header h2 { font-size: 1.2rem; margin: 0; padding: 0 0 0 10px; border: 0; border-left: 4px solid var(--bg-primary); color: var(--bg-primary); }
.background-close { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--bg-border); border-radius: 0; font-size: 25px; line-height: 1; color: var(--bg-text); background: var(--bg-panel-soft); cursor: pointer; }
.background-dialog-body { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 20px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.background-preview-section { min-width: 0; }
.background-preview { position: sticky; top: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--bg-border); aspect-ratio: 4/3; display: grid; place-items: center; background: var(--bg-panel-soft); isolation: isolate; }
.background-preview-image { position: absolute; inset: 0; z-index: -1; background-repeat: no-repeat; pointer-events: none; }
.background-preview-ui { width: 78%; border-radius: 0; padding: 13px; box-sizing: border-box; color: #333; background: rgba(255,255,255,var(--background-ui-alpha,.8)); font-size: 10px; box-shadow: var(--shadow); }
.background-preview-ui strong { display: block; font-size: 11px; margin-bottom: 12px; }
.background-preview-word { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; border: 1px solid #ccc; border-radius: 0; margin-bottom: 8px; }
.background-preview-word span { background: var(--bg-primary); color: var(--bg-button-text); border-radius: 0; padding: 4px 7px; }
.background-preview-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(128,128,128,.3); background: var(--bg-panel); }
body.transparent-result-table .background-preview-row { background: transparent; }
.background-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg-panel-soft); color: var(--bg-muted); font-size: .9rem; }
.background-preview-empty[hidden] { display: none; }
.background-image-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.background-button { padding: 8px 12px; border: 1px solid var(--bg-border); border-radius: 0; background: var(--bg-panel-soft); color: var(--bg-text); font: inherit; font-size: .85rem; font-weight: 400; line-height: 1.25; cursor: pointer; }
.background-button:hover { filter: brightness(.95); }
.background-button-primary { background: var(--bg-primary); border-color: var(--bg-primary); color: var(--bg-button-text); }
.background-button-danger { color: #b32636; }
.background-button-subtle { width: 100%; }
.background-dialog :disabled { opacity: .45; cursor: default; }
.background-image-info { margin: 8px 0; font-size: .75rem; color: var(--bg-muted); line-height: 1.6; overflow-wrap: anywhere; }
.background-privacy { margin: 8px 0 0; font-size: 11px; line-height: 1.8; color: var(--bg-muted); }
.background-controls { margin: 0; padding: 0; border: 0; min-width: 0; }
.background-controls legend { font-size: .95rem; font-weight: 700; margin-bottom: 12px; }
.background-control { margin: 0 0 12px; }
.background-control label,.background-control-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .85rem; font-weight: 600; }
.background-control output { font-size: .8rem; color: var(--bg-primary); font-variant-numeric: tabular-nums; }
.background-control select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 10px; min-height: 40px; border: 1px solid var(--bg-border); border-radius: 0; background: var(--bg-panel); color: var(--bg-text); font: inherit; font-size: .85rem; }
.background-control input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; min-height: 28px; margin: 0; background: transparent; cursor: pointer; }
.background-control input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--bg-border); border-radius: 0; }
.background-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -9px; background: var(--bg-primary); border: 0; border-radius: 0; }
.background-control input[type="range"]::-moz-range-track { height: 4px; background: var(--bg-border); border-radius: 0; }
.background-control input[type="range"]::-moz-range-thumb { width: 14px; height: 22px; background: var(--bg-primary); border: 0; border-radius: 0; }
.background-range { position: relative; display: flex; }
.background-range-touch { display: none; position: absolute; inset: 0; touch-action: pan-y; }
.background-control .background-check { justify-content: flex-start; min-height: 44px; font-weight: 400; cursor: pointer; }
.background-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--bg-primary); flex-shrink: 0; }
.background-crop { position: relative; height: 160px; overflow: hidden; border: 1px solid var(--bg-border); background: var(--bg-panel-soft); touch-action: none; user-select: none; cursor: grab; }
.background-crop-edit { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; }
.background-crop[hidden],.background-crop[data-enabled="false"] { display: none; }
.background-crop.is-dragging { cursor: grabbing; }
.background-crop-image { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.background-crop-frame { position: absolute; box-sizing: border-box; border: 2px solid var(--bg-primary); outline: 1px solid #fff; box-shadow: 0 0 0 999px rgba(0,0,0,.28); pointer-events: none; }
.background-crop-frame::before,.background-crop-frame::after { content: ''; position: absolute; pointer-events: none; }
.background-crop-frame::before { inset: 0 33.333%; border-left: 1px solid rgba(255,255,255,.7); border-right: 1px solid rgba(255,255,255,.7); }
.background-crop-frame::after { inset: 33.333% 0; border-top: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); }
.background-dialog-footer { padding: 12px 20px; border-top: 1px solid var(--bg-border); background: var(--bg-panel); flex-shrink: 0; }
.background-status { margin: 0 0 10px; font-size: .8rem; color: var(--bg-muted); line-height: 1.6; }
.background-status[hidden] { display: none; }
.background-status[data-error="true"] { color: #b32636; }
.background-footer-actions { display: flex; justify-content: flex-end; gap: 10px; }
body.dark-mode .background-dialog { --bg-panel: #1e1e1e; --bg-panel-soft: #2a2a2a; --bg-text: #e0e0e0; --bg-muted: #bbb; --bg-border: #555; --bg-primary: #90caf9; --bg-button-text: #000; }
body.dark-mode .background-preview-ui { background: rgba(30,30,30,var(--background-ui-alpha,.8)); color: #e0e0e0; }
body.dark-mode .background-button-danger,body.dark-mode .background-status[data-error="true"] { color: #ff9aaa; }
@media(any-pointer:coarse) {
  .background-range-touch { display: block; }
  .background-crop-edit { min-height: 44px; }
}
@media(min-width:769px) { .site-intro { padding-right: 125px; } .background-open { position: absolute; right: 0; top: 4px; margin: 0; } }
@media(max-width:600px) {
  .background-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); font-size: 14px; }
  .background-dialog-header { padding: 12px 16px; }
  .background-dialog-header h2 { font-size: 1.05rem; }
  .background-dialog-body { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .background-preview { position: relative; aspect-ratio: 16/9; }
  .background-preview-ui { max-width: 235px; font-size: 9px; }
  .background-dialog-footer { padding: 12px 16px; }
  .background-footer-actions .background-button { flex: 1; padding: 12px 8px; }
  .background-control select { font-size: 16px; }
  .background-control input[type="range"] { min-height: 44px; }
}