/* ARTIZS.SAY v0.5.8 — Support Modal Polish + QR Lightbox */

/* Clean reward milestones. v0.5.4 had legacy dark selectors that could leak into light mode; these overrides are intentional. */
.support-modal .support-tier-strip{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin:10px 0 8px!important;
}
.support-modal .support-tier-item,
.support-modal .support-tier-item.coffee,
.support-modal .support-tier-item.supporter{
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px!important;
  border:1px solid #e7eaf0!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 1px 0 rgba(20,30,45,.02)!important;
  color:#1c2430!important;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease!important;
}
.support-modal .support-tier-item.coffee{background:#fffdf9!important}
.support-modal .support-tier-item.supporter{background:#fbfaff!important}
.support-modal .support-tier-item.is-active{
  border-color:#bbc7dc!important;
  box-shadow:0 5px 16px rgba(34,48,73,.07)!important;
  transform:translateY(-1px)!important;
}
.support-modal .support-tier-item.coffee.is-active{border-color:#e8cf8f!important;background:#fffaf0!important}
.support-modal .support-tier-item.supporter.is-active{border-color:#c8bdf2!important;background:#f8f5ff!important}
.support-tier-icon{
  flex:0 0 34px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#f4f6f9;
  font-size:17px;line-height:1;
}
.support-tier-item.coffee .support-tier-icon{background:#fff4d9}
.support-tier-item.supporter .support-tier-icon{background:#f1edff}
.support-tier-copy{display:grid;min-width:0;gap:1px}
.support-tier-copy b{font-size:10px!important;line-height:1.15!important;color:#6b7482!important;font-weight:900!important}
.support-tier-copy strong{font-size:10.5px!important;line-height:1.25!important;color:#202734!important;font-weight:900!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-tier-copy small{font-size:8.5px!important;line-height:1.25!important;color:#8a929e!important;font-weight:700!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.support-modal .support-unlock-preview{
  min-height:0!important;
  margin:0 0 7px!important;
  padding:3px 4px!important;
  border:0!important;
  background:transparent!important;
  color:#8a919c!important;
  font-size:8.5px!important;
  line-height:1.3!important;
  font-weight:750!important;
  text-align:center!important;
}
.support-modal .support-unlock-preview[data-tier="60"],
.support-modal .support-unlock-preview[data-tier="100"]{background:transparent!important;color:#7e8794!important}

/* QR artwork is the visual hero and the whole image is a zoom target. */
.support-modal .support-qr-hero{
  appearance:none!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-height:286px!important;
  margin:4px 0 13px!important;
  padding:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  cursor:zoom-in!important;
  overflow:visible!important;
}
.support-modal .support-qr-hero>img#supportQr{
  display:block!important;
  width:min(286px,82vw)!important;
  height:min(286px,82vw)!important;
  max-width:100%!important;
  object-fit:contain!important;
  transition:transform .16s ease,filter .16s ease!important;
  filter:drop-shadow(0 14px 24px rgba(25,30,40,.05))!important;
}
.support-modal .support-qr-hero:hover>img#supportQr{transform:scale(1.015)!important;filter:drop-shadow(0 16px 28px rgba(25,30,40,.09))!important}
.support-qr-zoom-hint{
  position:absolute;
  right:10px;bottom:7px;
  display:inline-flex;align-items:center;gap:5px;
  min-height:25px;padding:5px 8px;
  border:1px solid rgba(218,223,231,.9);
  border-radius:999px;
  background:rgba(255,255,255,.91);
  box-shadow:0 5px 18px rgba(20,28,42,.06);
  color:#697382;font-size:8.5px;font-weight:850;
  backdrop-filter:blur(8px);
}
.support-qr-zoom-icon{font-size:11px;line-height:1}

/* Slip upload is a compact, friendly upload card instead of a browser-style field. */
.support-proof-field{display:block!important;margin-top:0!important}
.support-modal .support-proof-field>span:first-child{margin-bottom:7px!important}
.support-proof-picker{
  position:relative!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:66px!important;
  padding:9px 10px!important;
  border:1px dashed #d6dce5!important;
  border-radius:14px!important;
  background:#fbfcfe!important;
  color:#485363!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.support-proof-picker:hover{background:#f7f9fc!important;border-color:#bac4d1!important;box-shadow:0 5px 16px rgba(25,35,50,.04)!important}
.support-proof-picker.has-file{background:#f7fbf8!important;border-style:solid!important;border-color:#bcd7c5!important}
.support-proof-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#eef2f7;
  color:#536173;
}
.support-proof-picker.has-file .support-proof-icon{background:#e6f5eb;color:#3f7f56}
.support-proof-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.support-proof-copy{display:grid;min-width:0;gap:3px;text-align:left}
.support-proof-copy strong{font-size:10.5px;line-height:1.2;color:#253040;font-weight:900}
.support-proof-copy small{font-size:8.5px;line-height:1.25;color:#8a94a1;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-proof-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:6px 9px;
  border:1px solid #dde2e9;border-radius:9px;
  background:#fff;color:#505d6d;
  font-size:8.5px;font-weight:900;white-space:nowrap;
}
.support-proof-picker.has-file .support-proof-cta{border-color:#cddfd2;color:#3c704e}
.support-proof-picker input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important}
.support-proof-remove{
  display:block;
  margin:5px 2px 0 auto;
  padding:2px 0;
  border:0;background:transparent;color:#9a6a70;
  font-size:8.5px;font-weight:800;cursor:pointer;
}
.support-proof-remove:hover{color:#b44350}
.support-proof-remove.hidden{display:none!important}

/* Full-screen QR lightbox for easy scanning. */
html.support-lightbox-open,html.support-lightbox-open body{overflow:hidden!important}
.support-qr-lightbox{
  position:fixed;inset:0;z-index:5000;
  display:grid;place-items:center;
  padding:28px;
  background:rgba(8,11,16,.86);
  backdrop-filter:blur(10px);
}
.support-qr-lightbox.hidden{display:none!important}
.support-qr-lightbox-inner{display:grid;place-items:center;gap:10px;max-width:min(94vw,920px);max-height:94vh}
.support-qr-lightbox-inner img{
  display:block;
  width:min(82vw,760px);
  height:min(82vw,760px);
  max-width:94vw;max-height:84vh;
  object-fit:contain;
  border-radius:22px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.38);
}
.support-qr-lightbox-inner p{margin:0;color:rgba(255,255,255,.86);font-size:11px;font-weight:800;text-align:center}
.support-qr-lightbox-close{
  position:fixed;top:18px;right:20px;z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:28px;line-height:1;font-weight:300;cursor:pointer;
  backdrop-filter:blur(8px);
}
.support-qr-lightbox-close:hover{background:#fff;color:#141922}

html[data-theme="dark"] .support-modal .support-tier-item,
html[data-theme="dark"] .support-modal .support-tier-item.coffee,
html[data-theme="dark"] .support-modal .support-tier-item.supporter{background:#151b23!important;border-color:#303946!important;color:#eef2f7!important}
html[data-theme="dark"] .support-modal .support-tier-item.coffee.is-active{background:#211e16!important;border-color:#695b34!important}
html[data-theme="dark"] .support-modal .support-tier-item.supporter.is-active{background:#1e1a2a!important;border-color:#574b79!important}
html[data-theme="dark"] .support-tier-copy strong{color:#eef2f7!important}
html[data-theme="dark"] .support-tier-copy b,html[data-theme="dark"] .support-tier-copy small{color:#aab4c1!important}
html[data-theme="dark"] .support-tier-icon{background:#242c37}
html[data-theme="dark"] .support-tier-item.coffee .support-tier-icon{background:#332b19}
html[data-theme="dark"] .support-tier-item.supporter .support-tier-icon{background:#2a2439}
html[data-theme="dark"] .support-proof-picker{background:#121820!important;border-color:#394452!important;color:#d0d6df!important}
html[data-theme="dark"] .support-proof-picker:hover{background:#171f28!important;border-color:#4b5868!important}
html[data-theme="dark"] .support-proof-picker.has-file{background:#142019!important;border-color:#3c6249!important}
html[data-theme="dark"] .support-proof-icon{background:#222b36;color:#bcc7d4}
html[data-theme="dark"] .support-proof-picker.has-file .support-proof-icon{background:#1e3828;color:#88c39c}
html[data-theme="dark"] .support-proof-copy strong{color:#edf1f6}
html[data-theme="dark"] .support-proof-copy small{color:#99a5b3}
html[data-theme="dark"] .support-proof-cta{background:#1d2530;border-color:#35404d;color:#c8d1dc}
html[data-theme="dark"] .support-qr-zoom-hint{background:rgba(21,27,35,.9);border-color:#36404c;color:#c5ced9}

@media(max-width:520px){
  .support-modal .support-tier-strip{grid-template-columns:1fr!important;gap:7px!important}
  .support-modal .support-tier-item{padding:9px 10px!important}
  .support-tier-icon{width:32px;height:32px;flex-basis:32px}
  .support-qr-zoom-hint{right:4px;bottom:4px}
  .support-proof-picker{grid-template-columns:36px minmax(0,1fr) auto!important;gap:8px!important;min-height:62px!important;padding:8px 9px!important}
  .support-proof-icon{width:36px;height:36px}
  .support-proof-cta{padding:6px 8px}
  .support-qr-lightbox{padding:14px}
  .support-qr-lightbox-inner img{width:94vw;height:94vw;max-height:80vh;border-radius:16px}
  .support-qr-lightbox-close{top:12px;right:12px;width:38px;height:38px;font-size:25px}
}


/* ARTIZS.SAY v0.5.9 — Reward preview cards */

.support-modal .support-tier-item{appearance:none!important;width:100%!important;text-align:left!important;cursor:pointer!important;font:inherit!important}
.support-modal .support-tier-item:hover{border-color:#cbd2dc!important;box-shadow:0 6px 18px rgba(31,43,63,.07)!important;transform:translateY(-1px)!important}
.support-tier-mini-visual{position:relative;flex:0 0 54px;width:54px;height:38px;display:block}
.support-tier-mini-visual img{position:absolute;top:3px;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(27,34,44,.08))}
.support-tier-mini-visual img:nth-child(1){left:0;z-index:3}.support-tier-mini-visual img:nth-child(2){left:12px;z-index:2}.support-tier-mini-visual img:nth-child(3){left:23px;z-index:1}
.support-tier-mini-visual.supporter-visual img:nth-child(1){left:0;z-index:3}.support-tier-mini-visual.supporter-visual img:nth-child(2){left:14px;z-index:2}
.support-tier-mini-badge{position:absolute;right:0;bottom:1px;z-index:4;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fff;border-radius:999px;background:#eef2ff;color:#d75b78;font-size:9px;font-weight:900;box-shadow:0 2px 7px rgba(35,44,66,.10)}
.support-tier-chevron{margin-left:auto;color:#9ba3ae;font-size:18px;font-weight:700;line-height:1;transform:translateY(-1px)}
.support-tier-copy small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.support-tier-preview-label{color:#596c91;font-weight:900}

html.support-benefit-open,html.support-benefit-open body{overflow:hidden!important}
.support-benefit-lightbox{position:fixed;inset:0;z-index:4900;display:grid;place-items:center;padding:18px;background:rgba(14,18,24,.56);backdrop-filter:blur(8px)}
.support-benefit-lightbox.hidden{display:none!important}
.support-benefit-card{position:relative;width:min(430px,100%);max-height:min(86vh,760px);overflow:auto;padding:22px;border:1px solid rgba(226,229,235,.95);border-radius:22px;background:#fff;box-shadow:0 28px 80px rgba(16,22,32,.28)}
.support-benefit-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border:1px solid #e2e5ea;border-radius:11px;background:#fff;color:#66717f;font-size:22px;line-height:1;cursor:pointer}
.support-benefit-close:hover{background:#f5f7f9;color:#202731}
.support-benefit-kicker{padding-right:44px;color:#8a94a1;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.support-benefit-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:5px 0 16px;padding-right:36px}
.support-benefit-heading>div{min-width:0}.support-benefit-heading h3{margin:3px 0 0;color:#171d27;font-size:21px;line-height:1.1;letter-spacing:-.03em}
.support-benefit-amount{display:inline-block;color:#687484;font-size:10px;font-weight:900}.support-benefit-summary{flex:0 0 auto;color:#6e7887;font-size:9px;font-weight:850}
.support-benefit-sticker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.support-benefit-sticker{min-width:0;display:grid;place-items:center;gap:5px;min-height:134px;padding:10px;border:1px solid #eceef2;border-radius:16px;background:#fbfcfd}
.support-benefit-sticker img{display:block;width:104px;height:104px;max-width:100%;object-fit:contain;filter:drop-shadow(0 7px 11px rgba(22,30,42,.06))}.support-benefit-sticker span{color:#5f6977;font-size:9px;font-weight:850;text-align:center}
.support-benefit-badge-preview{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid #e7e3f7;border-radius:14px;background:#faf8ff}.support-benefit-badge-preview.hidden{display:none!important}
.support-benefit-avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#e9edf3;color:#465365;font-size:10px;font-weight:900}.support-benefit-badge-preview strong{font-size:10px;color:#29323e}.support-benefit-badge-preview .supporter-badge{margin-left:auto;white-space:nowrap}
.support-benefit-note{margin:12px 0 14px!important;color:#8a929d!important;font-size:9px!important;line-height:1.45!important;text-align:center}
.support-benefit-done{width:100%;min-height:42px;border:0;border-radius:12px;background:#171a20;color:#fff;font-size:10px;font-weight:900;cursor:pointer}
.support-benefit-done:hover{background:#252a32}

html[data-theme="dark"] .support-tier-mini-badge{border-color:#151b23;background:#2b3040;color:#ff9eb3}
html[data-theme="dark"] .support-benefit-card{background:#12171e;border-color:#303844}.support-benefit-close{box-shadow:none}
html[data-theme="dark"] .support-benefit-close{background:#1a212b;border-color:#303a47;color:#c2cad5}
html[data-theme="dark"] .support-benefit-heading h3{color:#f2f5f8}
html[data-theme="dark"] .support-benefit-kicker,html[data-theme="dark"] .support-benefit-amount,html[data-theme="dark"] .support-benefit-summary{color:#9eabba}
html[data-theme="dark"] .support-benefit-sticker{background:#171e27;border-color:#2d3743}.support-benefit-sticker span{color:#a9b4c2}
html[data-theme="dark"] .support-benefit-badge-preview{background:#1b1925;border-color:#3b3451}.support-benefit-badge-preview strong{color:#eef2f7}
html[data-theme="dark"] .support-benefit-done{background:#f1f4f7;color:#15191f}

@media(max-width:520px){
  .support-tier-mini-visual{flex-basis:50px;width:50px}
  .support-benefit-lightbox{padding:10px}
  .support-benefit-card{padding:18px 14px 14px;border-radius:18px;max-height:92vh}
  .support-benefit-heading{padding-right:30px;margin-bottom:12px}
  .support-benefit-heading h3{font-size:19px}
  .support-benefit-sticker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .support-benefit-sticker{min-height:118px;padding:7px}.support-benefit-sticker img{width:90px;height:90px}
}


/* ARTIZS.SAY v0.5.10 — clearer Supporter badge preview + arrowless Support UI */

/* The example username must read as a real profile, not a disabled placeholder. */
.support-benefit-badge-preview{
  opacity:1!important;
}
.support-benefit-badge-preview strong{
  color:#18202b!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:900!important;
  opacity:1!important;
  letter-spacing:-.01em;
}
.support-benefit-avatar{
  color:#243043!important;
  font-size:11px!important;
  font-weight:900!important;
  opacity:1!important;
}
.support-benefit-badge-preview .supporter-badge{
  color:#6c5412!important;
  font-weight:900!important;
  opacity:1!important;
}

/* No decorative arrows in Support surfaces. The card + Preview label already communicate interaction. */
.support-tier-chevron,
.support-qr-zoom-icon{display:none!important}

/* Keep QR interaction discoverable without putting an arrow over the artwork. */
.support-qr-zoom-hint{
  gap:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:8.5px!important;
  font-weight:850!important;
  letter-spacing:0!important;
}

html[data-theme="dark"] .support-benefit-badge-preview strong{color:#f4f7fa!important}
html[data-theme="dark"] .support-benefit-avatar{color:#e9eef5!important;background:#293241!important}
html[data-theme="dark"] .support-benefit-badge-preview .supporter-badge{color:#f2d982!important}