/* Editor layout: settings on the left, live preview on the right.
   Was capped at 1100px with a fixed 420px preview. Now it uses the shared
   content width and lets the preview grow, so on a large screen you see the
   overlay at something closer to its real size instead of a thumbnail. */
/* Fills the screen. The cap left a wide empty gutter, which is exactly what
   made the page look cheap. The preview column grows with the window so the
   overlay is previewed near its real size instead of as a thumbnail. */
.wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,32vw,720px);
      gap:var(--s-6);margin:0;width:100%;
      /* style.css caps .wrap at 560px for the sign-in column, which shares
         this class name. Editor pages must explicitly opt out or they get
         squashed into that narrow column. */
      max-width:none;
      padding:var(--s-6) var(--s-7) var(--s-8);
      padding:var(--s-6) clamp(20px, 3.5vw, 88px) calc(var(--s-8) * 1.5)}

@media(max-width:1040px){.wrap{grid-template-columns:1fr}}
@media(max-width:900px){.wrap{padding:var(--s-5) var(--s-4) var(--s-7)}}
h1{margin:0 0 2px}.sub{color:#8b93a7;font-size:14px;margin:0 0 16px}
.evtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.evtab{background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);
  border-radius:var(--radius-sm);padding:9px 15px;font-size:var(--t-small);font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .14s}
.evtab:hover{background:var(--panel-3);color:var(--text)}
.evtab.on{background:linear-gradient(180deg,var(--rose-2),var(--rose));border-color:var(--rose);
  color:#180509;box-shadow:0 4px 14px rgba(255,77,109,.28)}
/* Settings panels. Same treatment as .card so the app reads as one product
   rather than pages built at different times. */
.group{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 90px, rgba(0,0,0,.06)),
    var(--panel);
  border:1px solid var(--line);
  border-top-color:#3a4356;
  border-bottom-color:#232a37;
  border-radius:var(--radius);
  padding:var(--s-5);
  margin-bottom:var(--s-4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow);
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.group:hover{border-color:#414c63;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), var(--shadow-lg);
  transform:translateY(-1px)}

/* The header sits on its own line with a rule under it, so a long panel
   reads as sections rather than an undifferentiated list of rows. */
.group h3{
  margin:0 0 var(--s-4);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-soft);
}
.group h3{font-size:var(--t-tiny);text-transform:uppercase;
          letter-spacing:.08em;color:var(--muted);font-weight:700}
.field{display:flex;align-items:center;justify-content:space-between;
       gap:var(--s-4);margin:0;padding:var(--s-3) 0;
       border-top:1px solid var(--line-soft)}
.field:first-of-type{border-top:0;padding-top:0}
.field label{font-weight:520}
.field label{font-size:13px;color:#c7cdda;flex:0 0 auto}
.field .ctl{flex:1;display:flex;justify-content:flex-end;align-items:center;
            gap:var(--s-3);min-width:0}
input[type=text],select,input[type=number]{background:#12161e;box-shadow:var(--inset);
  border:1px solid var(--line);border-top-color:#232a37;
  color:var(--text);border-radius:var(--radius-sm);padding:9px 11px;font-size:var(--t-small);
  font-family:inherit;width:100%;max-width:340px;transition:border-color .14s,box-shadow .14s}
input[type=text]:focus,select:focus,input[type=number]:focus{border-color:var(--rose);
  box-shadow:var(--inset), 0 0 0 3px var(--rose-dim);outline:none}
input[type=range]{width:100%;max-width:260px;accent-color:var(--rose)}
input[type=color]{width:38px;height:30px;border:1px solid #262c38;border-radius:8px;background:#0f1218;cursor:pointer;padding:2px}
.val{font-size:12px;color:#8b93a7;min-width:38px;text-align:right}
.tog{width:42px;height:24px;border-radius:20px;background:#333a48;position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s}
.tog.on{background:#3ddc97}.tog:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}.tog.on:after{left:20px}
.pickbtn{background:#1c212b;border:1px solid #333a48;color:#e6e9ef;border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;font-family:inherit}
.pickbtn:hover{border-color:#ff4d6d}
.chosen{font-size:12px;color:#3ddc97;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hint{font-size:11.5px;color:#8b93a7;margin-top:4px}
/* right column */
.side{position:sticky;top:var(--s-8);align-self:start}
/* Bigger, so the preview is actually useful rather than a swatch. */
.previewbox{background:repeating-conic-gradient(#161b24 0% 25%,#10141b 0% 50%) 50%/26px 26px;
  border:1px solid var(--line);border-radius:var(--radius);min-height:360px;display:flex;
  align-items:center;justify-content:center;padding:var(--s-5);overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.2)}
.btnrow{display:flex;gap:10px;margin-top:14px}
.btnrow button{flex:1;border:0;border-radius:10px;padding:12px;font-size:14px;font-weight:650;cursor:pointer;font-family:inherit}
.btn-save{background:linear-gradient(180deg,var(--rose-2),var(--rose));color:#180509;
  box-shadow:0 6px 18px rgba(255,77,109,.24)}.btn-test{background:#1c212b;color:#e6e9ef;border:1px solid #333a48 !important}
.btn-save:hover{filter:brightness(1.08)}.btn-test:hover{border-color:#ff4d6d}
.urlbox{display:flex;gap:8px;align-items:center;background:#0f1218;border:1px solid #262c38;border-radius:10px;padding:9px 11px;margin-top:14px}
.urlbox code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#c7cdda;overflow:hidden;white-space:nowrap;flex:1}
.urlbox button{background:#1c212b;border:1px solid #262c38;color:#c7cdda;border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer}
/* preview alert */
.pv-alert{display:flex;gap:14px;align-items:center;border-radius:18px;padding:16px 22px;max-width:100%}
.pv-alert.top{flex-direction:column;text-align:center}
.pv-img{flex:0 0 auto;object-fit:contain;border-radius:12px}
.pv-body{display:flex;flex-direction:column;min-width:0;flex:1}
/* picker modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;z-index:200}
.modal-bg.show{display:flex}
.modal{width:min(680px,94vw);max-height:82vh;background:#12151c;border:1px solid #2c3342;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #262c38}
.modal-head h3{margin:0;font-size:16px}.modal-close{background:none;border:0;color:#8b93a7;font-size:22px;cursor:pointer}
.modal-tabs{display:flex;gap:6px;padding:10px 18px 0}
.modal-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:#8b93a7;font-size:13.5px;font-weight:600;padding:8px 10px;cursor:pointer;font-family:inherit}
.modal-tabs button.on{color:#fff;border-bottom-color:#ff4d6d}
.modal-body{padding:14px 18px;overflow:auto}
.pk-search{width:100%;background:#1c212b;border:1px solid #262c38;color:#e6e9ef;border-radius:9px;padding:9px 12px;font-size:14px;margin-bottom:12px;font-family:inherit}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pk-img{aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;background:#0f1218}
.pk-img:hover{border-color:#ff4d6d}
.pk-snd{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1c212b}
.pk-snd .nm{flex:1;font-size:13.5px;color:#e6e9ef}
.pk-snd button{background:#1c212b;border:1px solid #333a48;color:#e6e9ef;border-radius:7px;padding:6px 11px;font-size:12.5px;cursor:pointer}
.pk-snd .use{border-color:#3ddc97;color:#3ddc97}
.empty{color:#8b93a7;font-size:13px;text-align:center;padding:22px 0}

@keyframes pv-pop{0%{opacity:0;transform:translateY(-20px) scale(.88)}100%{opacity:1;transform:none}}
@keyframes pv-fade{0%{opacity:0}100%{opacity:1}}
@keyframes pv-slide{0%{opacity:0;transform:translateY(-42px)}100%{opacity:1;transform:none}}
@keyframes pv-bounce{0%{opacity:0;transform:translateY(-30px) scale(.85)}60%{opacity:1;transform:translateY(6px) scale(1.03)}100%{opacity:1;transform:none}}

.presetrow{display:flex;flex-wrap:wrap;gap:8px}
.presetbtn{background:#1c212b;border:1px solid #333a48;color:#e6e9ef;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.presetbtn:hover{border-color:#ff4d6d;color:#fff}

/* ── plan limit ─────────────────────────────────────────────────────────
   Shown when a save is refused because the plan is full. Deliberately not
   styled as an error: nothing has gone wrong, and there are two reasonable
   things to do about it. */
.limit-box{
  display:none;margin-top:var(--s-4);padding:var(--s-4) var(--s-5);
  background:rgba(255,176,32,.09);
  border:1px solid rgba(255,176,32,.32);
  border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);
}
.limit-box.show{display:block}
.limit-box b{display:block;color:var(--amber);font-size:14px;margin-bottom:6px}
.limit-box p{margin:0 0 12px;font-size:13px;color:var(--text-2);line-height:1.6}
.btn-upgrade{
  display:inline-block;padding:8px 16px;border-radius:9px;
  background:linear-gradient(180deg,var(--rose-2),var(--rose));
  color:#fff;font-size:13px;font-weight:640;text-decoration:none;
}
.btn-upgrade:hover{text-decoration:none;filter:brightness(1.08)}

/* ── overlay size controls ──────────────────────────────────────────────── */

.sz{display:flex;flex-direction:column;gap:var(--s-3)}
.sz-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.sz-f label{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);font-weight:800;margin-bottom:5px;
}
.sz-v{color:var(--rose-2);text-transform:none;letter-spacing:0;font-size:11.5px}
.sz-in{display:flex;align-items:center;gap:7px}
.sz-in input{margin:0;flex:1;min-width:0}
.sz-in span{font-size:12px;color:var(--muted);flex:none}
.sz-f input[type=range]{margin:0;width:100%}
.sz-hint{font-size:11.5px;color:var(--faint);line-height:1.5;margin:6px 0 0}

/* What to type into the browser source. Matching these numbers is what keeps
   an overlay sharp, so it is stated rather than left to be worked out. */
.sz-src{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:9px var(--s-3);border-radius:var(--radius-sm);
  background:var(--rose-dim);border:1px solid rgba(255,77,109,.3);
}
.sz-src-l{font-size:11px;color:var(--muted)}
.sz-src-v{
  font-size:13.5px;font-weight:800;color:var(--rose-2);
  font-variant-numeric:tabular-nums;
}

.sz-presets{display:flex;flex-wrap:wrap;gap:6px}
.sz-preset{
  padding:6px 11px;border-radius:20px;cursor:pointer;font-size:11.5px;
  font-weight:600;font-family:inherit;margin:0;width:auto;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  transition:all .12s;
}
.sz-preset:hover{border-color:var(--rose);color:var(--rose-2);background:var(--rose-dim)}