/* Permanent QoL interface enhancements; enabled only for owners who opt in. */
body.qol-enabled #main { max-width: none; }
body.qol-enabled .page .card,
body.qol-enabled .modal-box { border-radius: 14px; }
body.qol-enabled .page .btn { min-height: 36px; }
body.qol-enabled .btn:focus-visible,
body.qol-enabled .inp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.qol-enabled .page .blook-vis-md { width: 80px; height: 80px; }
body.qol-enabled .page .blook-emoji-md { font-size: 64px; }
body.qol-enabled .page .blook-card { padding: 14px; }
body.qol-enabled .page .grid2 { gap: 16px; }
body.qol-enabled .page .inp { min-height: 38px; }
.qol-settings { margin-bottom: 20px; }
.qol-settings p { margin-bottom: 14px; line-height: 1.6; }
.qol-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.qol-settings-fields label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 13px; }
.qol-settings-fields .inp { margin: 0; width: 100%; }
.qol-settings-fields input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
.qol-settings-fields input[type=color] { height: 44px; padding: 4px; }
body.qol-resizable .modal-box,
body.qol-resizable .page > .card,
body.qol-resizable .chat-wrap,
body.qol-resizable .inventory-sell-panel { resize: both; overflow: auto; max-width: 100%; min-width: min(280px, 100%); }
body.qol-enabled .live-trade-dock { max-width: calc(100vw - 36px); max-height: calc(100dvh - 36px); min-width: min(360px, calc(100vw - 36px)); min-height: 320px; }
body.qol-resizable .live-trade-dock { resize: both; }
body.qol-enabled .trade-rosters { gap: 16px; }
body.qol-enabled .trade-rosters section { background: var(--bg2); padding: 12px; }
.qol-trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 42vh; overflow: auto; padding: 3px; }
.qol-trade-card { min-width: 0; text-align: left; }
.qol-trade-card > .blook-vis,
.qol-trade-card > .blook-emoji { width: 100%; height: 110px; object-fit: contain; background: var(--bg); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.qol-trade-card > .blook-emoji { display: grid; place-items: center; font-size: 72px; }
.qol-trade-card.selected { outline: 2px solid var(--accent); }
.qol-trade-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.qol-trade-offer strong { width: 100%; }
.qol-trade-size { display: flex; gap: 5px; }
body.qol-enabled .trade-dock-head { flex-wrap: wrap; gap: 10px; }
.qol-trade-summary { color: var(--gold); font-size: 12px; padding-top: 10px; }
/* Custom palettes cover shared surfaces on every page, including light-mode overrides. */
body.qol-themed { background: var(--bg); color: var(--text); }
body.qol-themed #sidebar,
body.qol-themed #topbar,
body.qol-themed .card,
body.qol-themed .modal-box,
body.qol-themed .listing,
body.qol-themed .chat-wrap,
body.qol-themed .smart-sell-panel,
body.qol-themed .blook-card,
body.qol-themed .pack-card,
body.qol-themed .live-trade-dock { background: var(--bg2); color: var(--text); border-color: var(--border); }
body.qol-themed .btn,
body.qol-themed .tab,
body.qol-themed .inp,
body.qol-themed .tip-box,
body.qol-themed .setting-row,
body.qol-themed .rarity-pct-row { background: var(--bg3); color: var(--text); border-color: var(--border2); }
body.qol-themed .btn-primary,
body.qol-themed .nav-item.active,
body.qol-themed .tab.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
body.qol-themed .page-title,
body.qol-themed .card-title,
body.qol-themed .bk-name,
body.qol-themed .pk-name,
body.qol-themed .nav-item,
body.qol-themed .feature-title { color: var(--text); }
body.qol-themed .inp::placeholder { color: var(--muted); }
body.qol-themed .chat-msg,
body.qol-themed .trade-roster-row { border-color: var(--border); }
@media (max-width: 650px) {
    .qol-settings-fields { grid-template-columns: 1fr; }
    body.qol-enabled .live-trade-dock { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    body.qol-enabled .trade-rosters { grid-template-columns: 1fr; }
}