/* ad lab page — shared pieces; each tool's own css is scoped to #<tool id> */
.lab { padding: 120px 0 100px; position: relative; }
.lab-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.lab-head h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.2; margin: 6px 0 16px; }
.lab-head p { color: var(--gray); font-size: 1.08rem; }
.lab-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 56px; max-width: 980px; }
.lab-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #fff; font-size: 15px; text-decoration: none; transition: border-color .2s, background .2s; }
.lab-nav a i { color: var(--yellow); }
.lab-nav a:hover, .lab-nav a:focus-visible { border-color: var(--yellow); background: rgba(239,218,51,.08); }

.lab-tool { margin: 0 auto 90px; max-width: 1100px; scroll-margin-top: 100px; }
.lab-tool > header { margin-bottom: 22px; }
.lab-tool > header h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 8px; }
.lab-tool > header p { color: var(--gray); max-width: 720px; margin: 0; }
.lab-card { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 20px; padding: 24px; }
.lab-note { font-size: 13.5px; color: var(--gray); margin-top: 14px; }
.lab-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lab-field label { font-size: 14px; color: #e8e8ee; }
.lab-field input, .lab-field select, .lab-field textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 16px;
}
.lab-field input:focus, .lab-field select:focus, .lab-field textarea:focus { outline: none; border-color: var(--yellow); }
.lab-cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 600px) {
  .lab { padding-top: 100px; }
  .lab-card { padding: 16px; border-radius: 16px; }
  .lab-nav a { font-size: 14px; padding: 9px 13px; }
}

/* each tool sits in its own full-width band with its own accent colour */
.lab { padding-bottom: 0; }
.lab-band { position: relative; padding: 84px 0 90px; background: #07080b; border-top: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.lab-band--alt { background: #0e0f14; }
.lab-band::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--acc), transparent); }
.lab-band::after { content: ""; position: absolute; top: -220px; inset-inline-start: -160px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 16%, transparent), transparent); pointer-events: none; }
.lab-band--alt::after { inset-inline-start: auto; inset-inline-end: -160px; }
.lab-band > .container { position: relative; z-index: 1; }
.lab-band .lab-tool { margin-bottom: 0; }
.lab-band-tag { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--acc); font-size: 14px; font-weight: 700; }
.lab-band-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); }
.lab-band .lab-tool > header h2 { position: relative; padding-bottom: 12px; }
.lab-band .lab-tool > header h2::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 64px; height: 4px; border-radius: 4px; background: var(--acc); }
.lab-band .lab-card { border-color: color-mix(in srgb, var(--acc) 22%, rgba(255,255,255,.08)); }
.lab-nav a i { color: var(--acc, var(--yellow)); }
.lab-nav a:hover, .lab-nav a:focus-visible { border-color: var(--acc, var(--yellow)); background: color-mix(in srgb, var(--acc, #EFDA33) 10%, transparent); }
@media (max-width: 600px) {
  .lab-band { padding: 60px 0 64px; }
  .lab-band::after { width: 360px; height: 360px; }
  .lab-band-ico { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; }
}
.lab-band .lab-tool { scroll-margin-top: 175px; }
/* admock: live ad mockup */
#admock .am-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px; align-items: start; }
#admock .am-form { min-width: 0; }
#admock .am-form textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
#admock .am-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#admock .am-row > .lab-field { min-width: 0; }
#admock .am-count { margin: 0; font-size: 13px; color: var(--gray); line-height: 1.45; }
#admock .am-count b { color: #fff; font-weight: 600; }
#admock .am-count.am-warn { color: var(--yellow); }
#admock .am-count.am-warn b { color: var(--yellow); }

#admock .am-file input[type="file"] { padding: 8px; font-size: 14px; color: var(--gray); cursor: pointer; }
#admock .am-file input[type="file"]::file-selector-button {
  font: inherit; font-size: 14px; margin-inline-end: 10px; padding: 7px 12px; border-radius: 9px; border: 0;
  background: rgba(239,218,51,.14); color: var(--yellow); cursor: pointer;
}
#admock .am-clear { align-self: flex-start; background: none; border: 0; color: var(--gray); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 2px 0; }
#admock .am-clear:hover, #admock .am-clear:focus-visible { color: #fff; }

#admock .am-seg { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#admock .am-seg legend { font-size: 14px; color: #e8e8ee; margin-bottom: 8px; padding: 0; width: 100%; }
#admock .am-seg label { position: relative; cursor: pointer; }
#admock .am-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
#admock .am-seg span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: 15px; transition: border-color .2s, background .2s, color .2s; }
#admock .am-seg input:checked + span { border-color: var(--yellow); background: rgba(239,218,51,.12); color: var(--yellow); }
#admock .am-seg input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
#admock .am-local i { color: var(--yellow); margin-inline-end: 4px; }

/* preview column */
#admock .am-preview { min-width: 0; position: sticky; top: 96px; }
#admock .am-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); margin-bottom: 16px; }
#admock .am-tabs button {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px; border: 0; border-radius: 999px; background: none; color: var(--gray); font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s;
}
#admock .am-tabs button[aria-selected="true"] { background: var(--yellow); color: var(--black); font-weight: 600; }
#admock .am-tabs button:not([aria-selected="true"]):hover { color: #fff; }
#admock .am-tabs button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

#admock .am-stage {
  border-radius: 22px; padding: 22px 16px; display: flex; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08);
}
#admock .am-panel { width: 100%; display: flex; justify-content: center; }
#admock .am-panel[hidden] { display: none; }

#admock .am-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; justify-content: center; }
#admock .am-dl { font-size: 15px; padding: 10px 20px; cursor: pointer; font-family: inherit; }
#admock .am-dl[disabled] { opacity: .6; cursor: progress; }
#admock .am-dl-msg { font-size: 13.5px; color: var(--gray); }

/* ---------- shared mock ---------- */
#admock .am-mock {
  width: 100%; max-width: 380px; background: #fff; color: #050505; text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.34; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
#admock .am-mock * { box-sizing: border-box; }
#admock .am-top { display: flex; align-items: center; gap: 9px; padding: 12px 12px 8px; }
#admock .am-av {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c9ccd3, #8d929c); background-size: cover; background-position: center;
  color: #fff; font-weight: 700; font-size: 17px; line-height: 1;
}
#admock .am-av.am-has-logo { color: transparent; background-color: #fff; }
#admock .am-who { display: flex; flex-direction: column; min-width: 0; }
#admock .am-pname { font-weight: 600; font-size: 15px; color: #050505; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admock .am-sub { font-size: 13px; color: #65676b; display: inline-flex; align-items: center; gap: 4px; }
#admock .am-sub i { font-size: 11px; }
#admock .am-ctrl { margin-inline-start: auto; display: inline-flex; gap: 18px; color: #65676b; font-size: 18px; padding-inline-end: 4px; }
#admock .am-copy { margin: 0; padding: 0 12px 10px; color: #050505; font-size: 15px; line-height: 1.34; white-space: pre-line; overflow-wrap: anywhere; }
#admock .am-more { color: #65676b; font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
#admock .am-more:hover { text-decoration: underline; }

#admock .am-media {
  position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: #d9dce1; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: rgba(255,255,255,.92); text-align: center;
}
#admock .am-media.am-empty { background-image: linear-gradient(150deg, #b9c0ca 0%, #8e97a5 55%, #6d7684 100%); }
#admock .am-media.am-empty i { font-size: 34px; opacity: .85; }
#admock .am-media.am-empty span { font-size: 14px; font-weight: 500; }
#admock .am-media:not(.am-empty) > * { display: none; }
#admock .am-media .am-play { display: none; }
#admock .am-media.am-video .am-play {
  display: flex; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.45);
  align-items: center; justify-content: center; color: #fff; font-size: 22px; padding-inline-start: 4px;
}

/* ---------- facebook ---------- */
#admock .am-fb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f0f2f5; }
#admock .am-fb-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#admock .am-dom { font-size: 12.5px; color: #65676b; direction: ltr; text-align: right; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admock .am-dom:empty { display: none; }
#admock .am-hl { font-weight: 600; font-size: 15.5px; color: #050505; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#admock .am-btn { flex: 0 0 auto; background: #e2e5e9; color: #050505; font-weight: 600; font-size: 14.5px; padding: 8px 14px; border-radius: 6px; white-space: nowrap; }
#admock .am-fb-acts { display: flex; justify-content: space-around; padding: 4px 6px 6px; margin: 0 12px; border-top: 1px solid #ced0d4; color: #65676b; font-weight: 600; font-size: 14.5px; }
#admock .am-fb-acts span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 6px; }
#admock .am-fb-acts i { font-size: 17px; }
#admock .am-fb { padding-bottom: 2px; }

/* ---------- instagram ---------- */
#admock .am-ig { border-radius: 12px; }
#admock .am-ig .am-top { padding: 10px 12px; }
#admock .am-ig .am-av { width: 34px; height: 34px; font-size: 14px; }
#admock .am-ig .am-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d6d9de; }
#admock .am-ig .am-pname { font-size: 14px; }
#admock .am-ig .am-sub { font-size: 12px; color: #262626; }
#admock .am-ig .am-ctrl { color: #262626; font-size: 17px; }
#admock .am-ig-cta { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: #efefef; color: #262626; font-weight: 600; font-size: 14px; }
#admock .am-ig-cta i { font-size: 13px; }
#admock .am-ig-acts { display: flex; align-items: center; gap: 16px; padding: 10px 14px 6px; font-size: 23px; color: #262626; }
#admock .am-ig-acts .am-save { margin-inline-start: auto; }
#admock .am-ig-copy { padding: 2px 14px 14px; font-size: 14px; color: #262626; }
#admock .am-ig-copy b { font-weight: 600; margin-inline-end: 5px; }

/* ---------- story / reel ---------- */
#admock .am-st { position: relative; max-width: 300px; aspect-ratio: 9 / 16; background: #1c1e21; color: #fff; border-radius: 16px; }
#admock .am-st .am-st-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; background-color: #2a2d33; }
#admock .am-st .am-st-media.am-empty { background-image: linear-gradient(170deg, #9aa3b0 0%, #6b7482 50%, #3f4652 100%); }
#admock .am-st-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 58%, rgba(0,0,0,.62) 100%); }
#admock .am-st-progress { position: absolute; top: 8px; left: 10px; right: 10px; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
#admock .am-st-progress span { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; background: #fff; }
#admock .am-st .am-top { position: absolute; top: 14px; left: 0; right: 0; padding: 8px 10px; }
#admock .am-st .am-av { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
#admock .am-st .am-pname { color: #fff; font-size: 13.5px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#admock .am-st .am-sub { color: rgba(255,255,255,.88); font-size: 12px; }
#admock .am-st .am-ctrl { color: #fff; font-size: 17px; gap: 16px; }
#admock .am-st-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#admock .am-st-copy {
  margin: 0 0 8px; align-self: stretch; color: #fff; font-size: 13.5px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line;
}
#admock .am-st-up { font-size: 13px; line-height: 1; }
#admock .am-st-btn { background: #fff; color: #050505; font-weight: 600; font-size: 14px; padding: 9px 22px; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  #admock .am-grid { grid-template-columns: minmax(0, 1fr); }
  #admock .am-preview { position: static; }
}
@media (max-width: 600px) {
  #admock .am-row { grid-template-columns: minmax(0, 1fr); }
  #admock .am-stage { padding: 16px 10px; border-radius: 18px; }
  #admock .am-tabs button { font-size: 13.5px; gap: 5px; padding: 9px 4px; }
  #admock .am-tabs button i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #admock .am-tabs button, #admock .am-seg span, #admock .am-dl { transition: none; }
  #admock .am-dl:hover { transform: none; }
}

/* safezone: reels / stories safe-zone checker */
#safezone .sz-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "stage controls" "stage details"; gap: 0 36px; align-items: start; }
#safezone .sz-stage { grid-area: stage; }
#safezone .sz-controls { grid-area: controls; min-width: 0; }
#safezone .sz-details { grid-area: details; min-width: 0; }
#safezone .sz-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#safezone .sz-phone { width: 320px; max-width: 100%; padding: 9px; border-radius: 40px; background: #17181d; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
#safezone .sz-screen { position: relative; aspect-ratio: 9 / 16; width: 100%; border-radius: 31px; overflow: hidden; background: #0b0c0f; container-type: inline-size; }
#safezone .sz-screen.sz-over .sz-drop { opacity: 1; }

#safezone .sz-media, #safezone .sz-sample, #safezone .sz-zones, #safezone .sz-chrome, #safezone .sz-drop { position: absolute; inset: 0; }
#safezone .sz-media img, #safezone .sz-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sample creative, placed badly on purpose */
#safezone .sz-bg { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 40%, #3a3320, #121214 70%); display: flex; align-items: center; justify-content: center; }
#safezone .sz-bg i { font-size: 30cqw; color: rgba(239,218,51,.08); }
#safezone .sz-el { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 2.5cqw; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
#safezone .sz-el span { line-height: 1.15; }
#safezone .sz-el-head span { font-size: 8.4cqw; font-weight: 800; color: var(--yellow); }
#safezone .sz-el-prod { background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.25); border-radius: 50%; }
#safezone .sz-el-prod span { font-size: 4.6cqw; color: rgba(255,255,255,.75); }
#safezone .sz-el-price { background: var(--yellow); }
#safezone .sz-el-price span { font-size: 5.4cqw; font-weight: 800; color: #111; }
#safezone .sz-el-phone span { font-size: 5cqw; font-weight: 700; color: #fff; }
#safezone .sz-el.sz-bad { outline-color: #ff5a5a; }
#safezone .sz-el.sz-ok { outline-color: rgba(74, 222, 128, .8); }
#safezone .sz-el::after { position: absolute; top: -2.2cqw; inset-inline-end: -1cqw; font-size: 3cqw; font-weight: 700; padding: .4cqw 1.6cqw; border-radius: 99px; line-height: 1.4; z-index: 4; white-space: nowrap; }
#safezone .sz-el.sz-bad::after { content: "מוסתר"; background: #ff5a5a; color: #fff; }
#safezone .sz-el.sz-ok::after { content: "בטוח"; background: #4ade80; color: #0b2a14; }
#safezone .sz-el-head::after, #safezone .sz-el-phone::after { inset-inline-end: auto; inset-inline-start: 0; }

/* covered zones + safe frame */
#safezone .sz-zone { position: absolute; background: rgba(225, 45, 45, .42); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 9px); }
#safezone .sz-zone-btn { background-color: rgba(225, 45, 45, .5); }
#safezone .sz-screen.sz-with-chrome .sz-zone { background-color: rgba(10, 10, 14, .4); }
#safezone .sz-screen.sz-with-chrome .sz-zone-btn { background-color: rgba(10, 10, 14, .3); }
#safezone .sz-safe { position: absolute; border: 2px dashed var(--yellow); border-radius: 2cqw; box-shadow: 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; transition: inset .25s ease; }

/* fake app chrome */
#safezone .sz-chrome { color: #fff; font-size: 3.6cqw; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
#safezone .sz-screen:not(.sz-with-chrome) .sz-chrome { display: none; }
#safezone .sz-c { position: absolute; display: flex; align-items: center; gap: 2.4cqw; }
#safezone .sz-c i { font-size: 6.2cqw; }
#safezone .sz-col { flex-direction: column; gap: 5.5cqw; }
#safezone .sz-col i { font-size: 7cqw; }
#safezone .sz-brand { font-weight: 800; font-size: 5.6cqw; }
#safezone .sz-av { width: 8cqw; height: 8cqw; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), #c9a227); border: 1.5px solid #fff; flex: none; }
#safezone .sz-av-sq { border-radius: 1.6cqw; width: 7.2cqw; height: 7.2cqw; background: #444; }
#safezone .sz-name { font-weight: 700; }
#safezone .sz-muted { opacity: .8; font-size: 3.2cqw; }
#safezone .sz-cap { opacity: .92; }
#safezone .sz-cta { justify-content: space-between; background: rgba(255,255,255,.18); border-radius: 2cqw; padding: 0 3.4cqw; font-weight: 700; }
#safezone .sz-cta i { font-size: 4cqw; }
#safezone .sz-cta-tt { background: #fe2c55; justify-content: center; }
#safezone .sz-pill { justify-content: center; background: #fff; color: #111; text-shadow: none; border-radius: 99px; font-weight: 700; padding: 1.6cqw 4cqw; flex-direction: column; gap: 0; }
#safezone .sz-pill i { font-size: 3.6cqw; }
#safezone .sz-reply { border: 1.5px solid rgba(255,255,255,.7); border-radius: 99px; padding: 0 4cqw; }
#safezone .sz-bars { display: flex; gap: 1cqw; }
#safezone .sz-bars span { flex: 1; height: .7cqw; background: rgba(255,255,255,.45); border-radius: 1cqw; }
#safezone .sz-bars span:first-child { background: #fff; }
#safezone .sz-nav { justify-content: space-around; background: rgba(0,0,0,.75); }
#safezone .sz-nav i { font-size: 5.6cqw; }
#safezone .sz-tabs-tt { justify-content: center; gap: 4cqw; font-weight: 700; font-size: 4.2cqw; }
#safezone .sz-tabs-tt b { border-bottom: 2px solid #fff; padding-bottom: .6cqw; }
#safezone .sz-tabs-tt span { opacity: .7; }

/* drag over */
#safezone .sz-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(239,218,51,.18); border: 3px dashed var(--yellow); border-radius: 31px; color: var(--yellow); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 6; }
#safezone .sz-drop i { font-size: 34px; }

#safezone .sz-play { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
#safezone .sz-play:hover, #safezone .sz-play:focus-visible { border-color: var(--yellow); color: var(--yellow); }
#safezone .sz-play[hidden] { display: none; }

/* side panel */
#safezone .sz-seg { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#safezone .sz-seg legend { font-size: 14px; color: #e8e8ee; margin-bottom: 10px; padding: 0; width: 100%; }
#safezone .sz-seg label { position: relative; cursor: pointer; }
#safezone .sz-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
#safezone .sz-seg span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: 15px; transition: border-color .2s, background .2s, color .2s; }
#safezone .sz-seg input:checked + span { border-color: var(--yellow); background: rgba(239,218,51,.12); color: var(--yellow); }
#safezone .sz-seg input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }

#safezone .sz-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; color: #e8e8ee; margin-bottom: 20px; position: relative; width: fit-content; max-width: 100%; }
#safezone .sz-switch input { position: absolute; z-index: 1; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
#safezone .sz-switch-ui { flex: none; width: 44px; height: 26px; border-radius: 99px; background: rgba(255,255,255,.16); position: relative; transition: background .2s; }
#safezone .sz-switch-ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
#safezone .sz-switch input:checked + .sz-switch-ui { background: var(--yellow); }
#safezone .sz-switch input:checked + .sz-switch-ui::after { transform: translateX(-18px); background: #111; }
#safezone .sz-switch input:focus-visible + .sz-switch-ui { outline: 2px solid var(--yellow); outline-offset: 2px; }

#safezone .sz-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 22px; }
#safezone .sz-pick { font: inherit; font-weight: 700; cursor: pointer; padding: 11px 22px; }
#safezone .sz-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#safezone .sz-reset { background: none; border: 0; color: var(--gray); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 4px 0; }
#safezone .sz-reset:hover, #safezone .sz-reset:focus-visible { color: #fff; }
#safezone .sz-reset[hidden] { display: none; }
#safezone .sz-hint { width: 100%; margin: 0; font-size: 13.5px; }

#safezone .sz-info { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
#safezone .sz-title { font-size: 1.1rem; margin: 0 0 10px; }
#safezone .sz-nums { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 0 0 14px; }
#safezone .sz-nums li { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; color: var(--gray); line-height: 1.4; }
#safezone .sz-nums b { display: block; color: #fff; font-size: 1.15rem; }
#safezone .sz-nums small { font-size: 12.5px; }
#safezone .sz-tip { margin: 0 0 10px; color: #d8d8de; }
#safezone .sz-status { margin: 0 0 14px; font-size: 14px; color: var(--yellow); min-height: 1px; }
#safezone .sz-status:empty { display: none; }
#safezone .sz-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; font-size: 13.5px; color: var(--gray); }
#safezone .sz-legend li { display: flex; align-items: center; gap: 8px; }
#safezone .sz-key { width: 22px; height: 14px; border-radius: 4px; flex: none; }
#safezone .sz-key-cover { background: rgba(255, 70, 70, .45); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px); }
#safezone .sz-key-safe { border: 2px dashed var(--yellow); }
#safezone .lab-note a { color: #e8e8ee; text-decoration: underline; }

@media (max-width: 860px) {
  #safezone .sz-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "controls" "stage" "details"; gap: 0; }
  #safezone .sz-stage { margin-bottom: 24px; }
  #safezone .sz-upload { justify-content: center; }
  #safezone .sz-hint { text-align: center; }
  #safezone .sz-phone { width: 300px; }
}
@media (max-width: 600px) {
  #safezone .sz-seg span { font-size: 14px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #safezone .sz-safe, #safezone .sz-el, #safezone .sz-switch-ui, #safezone .sz-switch-ui::after, #safezone .sz-drop { transition: none; }
}

/* budget: reverse budget calculator */
#budget .bud-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; }
#budget .bud-form, #budget .bud-out { min-width: 0; }
#budget .bud-goal label { font-size: 16px; font-weight: 700; color: #fff; }
#budget .bud-goal input { font-size: 20px; padding: 13px 14px; border-color: rgba(239,218,51,.45); }
#budget .bud-hint { font-size: 12.5px; color: var(--gray); }
#budget input::placeholder { color: rgba(255,255,255,.38); }

#budget .bud-mode { margin: 6px 0 16px; }
#budget .bud-mode-q { display: block; font-size: 14px; color: #e8e8ee; margin-bottom: 8px; }
#budget .bud-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
#budget .bud-seg label { position: relative; cursor: pointer; }
#budget .bud-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
#budget .bud-seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 42px; padding: 6px 8px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--gray); transition: background .2s, color .2s; }
#budget .bud-seg input:checked + span { background: var(--yellow); color: var(--black); font-weight: 700; }
#budget .bud-seg input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
#budget .bud-err { color: #ff9a8a; font-size: 14px; margin: 4px 0 0; }

#budget .bud-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#budget .bud-stat { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
#budget .bud-stat span { display: block; font-size: 13px; color: var(--gray); line-height: 1.35; }
#budget .bud-stat b { display: block; font-size: clamp(19px, 2.2vw, 25px); font-weight: 800; color: #fff; line-height: 1.3; margin-top: 4px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#budget .bud-stat small { display: block; font-size: 11.5px; color: rgba(169,169,178,.8); }
#budget .bud-stat.bud-main { border-color: rgba(239,218,51,.5); background: rgba(239,218,51,.07); }
#budget .bud-stat.bud-main b { color: var(--yellow); }
#budget .bud-stat.bud-clk { grid-column: span 1; }
#budget .bud-stats.has-clk { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#budget .bud-stats.has-clk .bud-stat { grid-column: span 2; }
#budget .bud-stats.has-clk .bud-stat.bud-clk { grid-column: span 3; }

#budget .bud-funnel { display: block; width: 100%; max-width: 520px; height: auto; margin: 18px auto 0; }
#budget .bud-funnel text { font-family: 'Rubik', sans-serif; }
#budget .bud-empty { text-align: center; font-size: 14px; margin: 6px 0 0; }
#budget .bud-insight { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(239,218,51,.08); border: 1px solid rgba(239,218,51,.25); }
#budget .bud-insight i { color: var(--yellow); margin-top: 5px; }
#budget .bud-insight p { margin: 0; color: #f1f1f4; font-size: 15px; line-height: 1.6; }
#budget .bud-insight b { color: var(--yellow); }

@media (max-width: 880px) {
  #budget .bud-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  #budget .bud-stats, #budget .bud-stats.has-clk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #budget .bud-stats .bud-stat, #budget .bud-stats.has-clk .bud-stat, #budget .bud-stats.has-clk .bud-stat.bud-clk { grid-column: span 1; }
  #budget .bud-stats .bud-stat.bud-main { grid-column: 1 / -1; order: -1; }
  #budget .bud-stat b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  #budget .bud-seg span { transition: none; }
}
#budget input[type=number] { -moz-appearance: textfield; appearance: textfield; }
#budget input[type=number]::-webkit-inner-spin-button, #budget input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#budget [hidden] { display: none !important; }

/* auction: how Meta picks which ad to show (simplified) */
#auction .au-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
#auction .au-presets-label { font-size: 14px; color: var(--gray); margin-inline-end: 4px; }
#auction .au-preset { font: inherit; font-size: 15px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #fff; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
#auction .au-preset:hover, #auction .au-preset:focus-visible { border-color: var(--yellow); }
#auction .au-preset:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
#auction .au-preset[aria-pressed="true"] { border-color: var(--yellow); background: rgba(239,218,51,.12); color: var(--yellow); }

#auction .au-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#auction .au-adv { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 16px 4px; background: rgba(0,0,0,.25); transition: border-color .25s, box-shadow .25s; min-width: 0; }
#auction .au-adv.au-win { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset; }
#auction .au-adv h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; margin: 0 0 14px; }
#auction .au-dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #111; flex: none; background: var(--c); }
#auction .au-crown { margin-inline-start: auto; color: var(--yellow); font-size: 14px; font-weight: 700; display: none; align-items: center; gap: 6px; }
#auction .au-win .au-crown { display: inline-flex; }

#auction .au-adv .lab-field { gap: 4px; }
#auction .au-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#auction .au-row label { font-size: 14px; }
#auction .au-row output { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
#auction .au-help { font-size: 12.5px; color: var(--gray); margin: 0; line-height: 1.4; }

#auction input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; font-size: 16px; touch-action: pan-y; direction: rtl; }
#auction input[type="range"]:focus { outline: none; }
#auction input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to left, var(--yellow) var(--p, 50%), rgba(255,255,255,.16) var(--p, 50%)); }
#auction input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.16); }
#auction input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--yellow); }
#auction input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--yellow); margin-top: -9px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#auction input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--yellow); }
#auction input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(239,218,51,.5); outline-offset: 2px; }
#auction input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid rgba(239,218,51,.5); outline-offset: 2px; }

#auction .au-result { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; }
#auction .au-result-title { font-size: 1.15rem; margin: 0 0 16px; }
#auction .au-bars { display: flex; flex-direction: column; gap: 14px; }
#auction .au-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
#auction .au-bar-name { font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#auction .au-bar-name .au-dot { width: 22px; height: 22px; font-size: 12px; }
#auction .au-track { height: 30px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; display: flex; }
#auction .au-seg-bid, #auction .au-seg-q { height: 100%; transition: width .35s ease; }
#auction .au-seg-bid { background: var(--c); }
#auction .au-seg-q { background: var(--c); opacity: .45; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 2px, transparent 2px 7px); }
#auction .au-bar-val { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: start; }
#auction .au-bar.au-win .au-track { box-shadow: 0 0 0 2px var(--yellow); }
#auction .au-bar.au-win .au-bar-val { color: var(--yellow); }
#auction .au-bar:not(.au-win) .au-track { opacity: .7; }

#auction .au-verdict { margin: 18px 0 14px; font-size: 1.05rem; color: #fff; font-weight: 500; }
#auction .au-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: #e8e8ee; }
#auction .au-formula span { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 4px 10px; }
#auction .au-formula b { color: var(--yellow); }
#auction .au-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; font-size: 13px; color: var(--gray); }
#auction .au-legend li { display: flex; align-items: center; gap: 8px; }
#auction .au-key { width: 20px; height: 12px; border-radius: 3px; background: #ddd; }
#auction .au-key-q { opacity: .45; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px); }
#auction .lab-note a { color: #e8e8ee; text-decoration: underline; }

@media (max-width: 900px) {
  #auction .au-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #auction .au-bar { grid-template-columns: max-content minmax(0, 1fr) 40px; gap: 8px; }
  #auction .au-bar-name { font-size: 14px; gap: 6px; }
  #auction .au-preset { font-size: 14px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #auction .au-seg-bid, #auction .au-seg-q, #auction .au-adv, #auction .au-preset { transition: none; }
}

/* abtest: A/B significance calculator */
#abtest .ab-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; align-items: start; }
#abtest .ab-inputs, #abtest .ab-out { min-width: 0; }
#abtest .ab-ad { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 14px 16px 2px; margin: 0 0 14px; min-width: 0; }
#abtest .ab-ad legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 700; color: #fff; font-size: 15px; }
#abtest .ab-tag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 14px; font-weight: 800; }
#abtest .ab-a .ab-tag { background: #9aa6bd; color: #050608; }
#abtest .ab-b .ab-tag { background: var(--yellow); color: #050608; }
#abtest .ab-b { border-color: rgba(239,218,51,.3); }
#abtest input::placeholder { color: rgba(255,255,255,.38); }

#abtest .ab-verdict { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; font-size: 18px; font-weight: 700; line-height: 1.45; color: #fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
#abtest .ab-verdict i { font-size: 20px; color: var(--gray); flex: none; }
#abtest .ab-verdict.is-empty { font-size: 15px; font-weight: 400; color: var(--gray); }
#abtest .ab-verdict.is-win { background: rgba(239,218,51,.1); border-color: rgba(239,218,51,.5); }
#abtest .ab-verdict.is-win i { color: var(--yellow); }
#abtest .ab-verdict.is-wait i { color: #9aa6bd; }
#abtest .ab-err { color: #ff9a8a; font-size: 14px; margin: -4px 0 12px; }

#abtest .ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#abtest .ab-stat { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
#abtest .ab-stat span { display: block; font-size: 13px; color: var(--gray); line-height: 1.35; }
#abtest .ab-stat b { display: block; font-size: clamp(19px, 2vw, 23px); font-weight: 800; color: #fff; margin-top: 4px; line-height: 1.3; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#abtest .ab-stat small { display: block; font-size: 11.5px; color: rgba(169,169,178,.85); }

#abtest .ab-warn { list-style: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,170,90,.08); border: 1px solid rgba(255,170,90,.3); }
#abtest .ab-warn li { position: relative; padding-right: 22px; font-size: 14px; color: #f3dcc6; line-height: 1.55; }
#abtest .ab-warn li + li { margin-top: 6px; }
#abtest .ab-warn li::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 0; top: 1px; color: #ffb36b; font-size: 12px; }

#abtest .ab-chart { margin: 16px 0 0; }
#abtest .ab-chart svg { display: block; width: 100%; height: auto; }
#abtest .ab-chart text { font-family: 'Rubik', sans-serif; }
#abtest .ab-chart figcaption { font-size: 13px; color: var(--gray); margin-top: 6px; line-height: 1.55; }
#abtest .ab-curve { transition: opacity .3s; }

@media (max-width: 960px) {
  #abtest .ab-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #abtest .ab-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #abtest .ab-ad { margin: 0; }
}
@media (max-width: 620px) {
  #abtest .ab-inputs { grid-template-columns: minmax(0, 1fr); }
  #abtest .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #abtest .ab-verdict { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #abtest .ab-curve { transition: none; }
}
#abtest input[type=number] { -moz-appearance: textfield; appearance: textfield; }
#abtest input[type=number]::-webkit-inner-spin-button, #abtest input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#abtest [hidden] { display: none !important; }

/* ---------- utm: UTM link + QR ---------- */
#utm .utm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#utm .utm-grid > * { min-width: 0; }
#utm .utm-label { display: block; font-size: 14px; color: #e8e8ee; margin-bottom: 8px; }
#utm .utm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#utm .utm-row > * { min-width: 0; }
#utm input[dir="ltr"] { text-align: left; }
#utm input[dir="ltr"]::placeholder { color: rgba(255,255,255,.3); }
#utm .utm-msg { font-size: 13px; min-height: 0; color: #ff9b8a; }
#utm .utm-msg:empty { display: none; }
#utm .utm-msg.is-ok { color: var(--gray); }
#utm .lab-field input.is-bad { border-color: #ff7a66; }

#utm .utm-presets-wrap { margin: 4px 0 18px; }
#utm .utm-presets { display: flex; flex-wrap: wrap; gap: 8px; }
#utm .utm-presets button {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff;
  font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s;
}
#utm .utm-presets button i { color: var(--yellow); }
#utm .utm-presets button:hover, #utm .utm-presets button:focus-visible { border-color: var(--yellow); outline: none; }
#utm .utm-presets button[aria-pressed="true"] { background: rgba(239,218,51,.14); border-color: var(--yellow); }

#utm .utm-warn { font-size: 13.5px; color: #f3e27a; background: rgba(239,218,51,.08); border: 1px solid rgba(239,218,51,.25); border-radius: 12px; padding: 9px 12px; margin: 0 0 12px; }
#utm .utm-warn[hidden] { display: none; }

#utm .utm-result {
  display: block; padding: 14px; border-radius: 12px; background: rgba(0,0,0,.4); border: 1px dashed rgba(255,255,255,.18);
  font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 14.5px; line-height: 1.55; color: var(--gray);
  text-align: left; overflow-wrap: anywhere; word-break: break-all; min-height: 52px;
}
#utm .utm-result:not(.is-ready) { font-family: inherit; font-size: 14px; }
#utm .utm-result.is-ready { color: #fff; border-style: solid; border-color: rgba(239,218,51,.4); }
#utm .utm-result b { color: var(--yellow); font-weight: 500; }

#utm .utm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#utm .utm-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff;
  font: inherit; font-size: 14.5px; cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s;
}
#utm .utm-btn:hover:not(:disabled), #utm .utm-btn:focus-visible { border-color: var(--yellow); outline: none; }
#utm .utm-btn:disabled, #utm .utm-btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
#utm .utm-btn[hidden] { display: none; }
#utm #utm-copy:not(:disabled) { background: var(--yellow); color: #111; border-color: var(--yellow); font-weight: 500; }
#utm #utm-copy.is-done { background: #fff; border-color: #fff; }

#utm .utm-qr-box { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
#utm .utm-qr {
  width: 180px; height: 180px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#utm .utm-qr.is-ready { border: 0; background: transparent; }
#utm .utm-qr canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; border-radius: 8px; }
#utm .utm-qr-empty { font-size: 13px; color: var(--gray); text-align: center; padding: 12px; }
#utm .utm-qr-opts .lab-field { margin-bottom: 10px; }
#utm .utm-qr-opts .utm-actions { margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; }
#utm .utm-qr-opts .utm-btn { justify-content: center; padding-inline: 10px; }
#utm .utm-dl-note { font-size: 12.5px; color: var(--gray); margin: 8px 0 0; line-height: 1.5; }
#utm .utm-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#utm .utm-colors input[type="color"] { height: 44px; padding: 4px; cursor: pointer; }

#utm .utm-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
#utm .utm-tips h3 { font-size: 17px; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
#utm .utm-tips h3 i { color: var(--yellow); }
#utm .utm-tips p { color: var(--gray); font-size: 15px; margin: 0; }

@media (max-width: 900px) {
  #utm .utm-grid, #utm .utm-tips { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #utm .utm-row { grid-template-columns: 1fr; }
  #utm .utm-qr-box { grid-template-columns: 1fr; justify-items: center; }
  #utm .utm-qr { width: 220px; height: 220px; }
  #utm .utm-qr-opts { width: 100%; }
  #utm .lab-cta .btn { width: 100%; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  #utm .utm-presets button, #utm .utm-btn { transition: none; }
}