/* App color themes (MP Shop). Applied when html has .th (any theme except the default Midnight).
   Every page gets the theme's background, and the main buttons take the theme's color. */

/* backgrounds */
html.th, html.th body, html.th body[data-view] { background: var(--bg); }
html.th #app { background: transparent; }
html.th .screen:not(#gts) { background: var(--app-bg) !important; }
html.th #pp { background-color: var(--bg); }
html.th .qz-group, html.th .tn-lb, html.th .grp { background: var(--s) !important; }
html.th .e7-nb, html.th #cs .nb, html.th .scrolled .nb { background: var(--bg) !important; }
html.th .mps-app { background: var(--app-bg); }
html.th #nv.tb .on, html.th .tb .on { color: var(--acc); }

/* main buttons */
html.th :is(.e7-btn, .w6-cta.on, .x6-btn.on, .lz-earn, .lz-chips button.on, .sl-spin, .ar-go, .ar-seg button.on,
  .y5-b.pri, .pbtn.pri, .fs3 button.on, .ffab, .c5-save, .c5-nav button.on, .mx-go, .shopx-btn, .rf-copy, .o4-row button,
  .uf-btn, .rm-share, .seg.on, .cz-seg button.on, .gta-btn:not(.on), .btn:not(.g):not(.d)):not(:disabled) {
  background: var(--acc) !important; color: var(--on-acc) !important; border-color: transparent !important;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--acc) 85%, transparent) !important;
}
html.th :is(.e7-btn, .sl-spin, .ar-go, .mx-go, .pbtn.pri, .y5-b.pri, .c5-save, .lz-earn, .w6-cta.on, .btn):not(:disabled) :is(svg, i, b, span, small, em) { color: inherit; }
html.th .mx-cat.on span { background: var(--acc) !important; color: var(--on-acc) !important; }
html.th .tgl.on { background: var(--acc) !important; }
html.th .tgl.on:after { background: var(--on-acc) !important; }
html.th .h-msg.ok, html.th a.more, html.th .more { color: var(--acc2); }

/* shop: photo theme panel */
.th-photo { display: flex; gap: 12px; align-items: center; padding: 10px; margin-bottom: 10px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.th-ph { flex: none; width: 74px; height: 96px; border-radius: 12px; background: center / cover no-repeat rgba(255,255,255,.06); }
.th-ph.none { display: grid; place-items: center; text-align: center; font-size: 11px; color: rgba(255,255,255,.5); padding: 6px; box-sizing: border-box; }
.th-photo > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.th-acc { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; cursor: pointer; }
.th-acc input { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.sw-photo { background: center / cover no-repeat linear-gradient(135deg, #2a2340, #0d0d14); display: grid; place-items: center; color: rgba(255,255,255,.75); }
.sw-photo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }