.lag-wrap{max-width:560px;margin:0 auto 48px;font-family:"Segoe UI",system-ui,sans-serif;}
.lag-top{text-align:center;margin-bottom:20px;}
.lag-tagline{font-size:1rem;font-weight:600;color:#fff;margin:0 0 16px;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.lag-preview{position:relative;border-radius:14px;overflow:hidden;background:#0a0a14;box-shadow:0 12px 40px rgba(0,0,0,.28);margin-bottom:22px;}
#lag-canvas{display:block;width:100%;height:auto;}
.lag-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.42);color:#fff;pointer-events:none;gap:10px;}
.lag-hint p{margin:0;font-size:.95rem;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);text-align:center;padding:0 20px;}
.lag-controls{text-align:center;}
.lag-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border:none;border-radius:50px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .18s,box-shadow .18s;}
.lag-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22);}
.lag-btn:active{transform:translateY(0);}
.lag-btn-primary{background:linear-gradient(135deg,#0d1b6e,#1e3a8a);color:#fff;font-size:1.05rem;padding:15px 36px;}
.lag-btn-ghost{background:transparent;color:#333;border:2px solid #d0d0d0;font-size:.9rem;padding:11px 24px;}
.lag-btn-gold{background:linear-gradient(135deg,#92680a,#c9960e,#e8be3a);color:#1a0f00;font-size:1.05rem;padding:15px 32px;}
.lag-tip{color:#999;font-size:.8rem;margin:10px 0 0;}
#lag-upload-row{margin-bottom:4px;}
#lag-action-row{justify-content:center;flex-wrap:wrap;gap:12px;}
#lag-processing{display:flex;align-items:center;justify-content:center;gap:10px;color:#555;font-size:.9rem;padding:14px;}
.lag-spinner{width:20px;height:20px;border:3px solid #e0e0e0;border-top-color:#0d1b6e;border-radius:50%;animation:lag-spin .65s linear infinite;flex-shrink:0;}
@keyframes lag-spin{to{transform:rotate(360deg);}}
@media(max-width:480px){
  .lag-preview{width:70%;margin-left:auto;margin-right:auto;}
  .lag-btn-primary,.lag-btn-gold{font-size:.95rem;padding:13px 26px;}
}

/* ============================================================
   Move & zoom controls — styled for the dark hero backdrop
   (the page's section is a dark video: mean RGB ~30,20,40.
   Accents use the site's own golds #eab910 / #ffa22f, matched
   to the flyer's gold ring, so the panel reads as part of the page.)
   ============================================================ */
.lag-adjust{
  position:relative;
  max-width:560px;
  margin:0 auto 22px;
  padding:16px 18px 13px;
  background:linear-gradient(180deg,rgba(34,38,48,.78),rgba(16,18,22,.86));
  border:1px solid rgba(234,185,16,.34);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  color:#f2f3f5;
  font-family:inherit;
  transition:opacity .22s,border-color .22s;
}
.lag-adjust::before{                       /* gold hairline across the top edge */
  content:"";
  position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,215,106,.75),transparent);
}
.lag-adjust-idle{opacity:.5;}
.lag-zoom-row{display:flex;align-items:center;gap:14px;}

/* - and + : squared-off glass keys rather than plain circles */
.lag-round{
  flex:0 0 auto;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#f2f3f5;font-size:1.3rem;font-weight:700;line-height:1;
  cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.lag-round:hover:not(:disabled){background:rgba(234,185,16,.16);border-color:rgba(234,185,16,.62);color:#ffd76a;transform:translateY(-1px);}
.lag-round:active:not(:disabled){transform:translateY(0);}
.lag-round:focus-visible,#lag-zoom:focus-visible,.lag-btn-ghost:focus-visible{outline:2px solid #ffd76a;outline-offset:3px;}
.lag-round:disabled{opacity:.38;cursor:not-allowed;}

/* slider: dark track, gold thumb */
#lag-zoom{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;min-width:0;height:26px;background:transparent;
  cursor:pointer;accent-color:#eab910;
}
#lag-zoom::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.06);}
#lag-zoom::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe6a3,#eab910 70%);
  border:2px solid #101216;
  box-shadow:0 2px 9px rgba(0,0,0,.55),0 0 0 3px rgba(234,185,16,.16);
}
#lag-zoom::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.18);}
#lag-zoom::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#eab910;border:2px solid #101216;box-shadow:0 2px 9px rgba(0,0,0,.55);}
#lag-zoom:disabled{cursor:not-allowed;}

.lag-zoom-val{flex:0 0 auto;min-width:56px;text-align:right;font-size:.9rem;font-weight:700;letter-spacing:.02em;color:#ffd76a;font-variant-numeric:tabular-nums;}
.lag-adjust-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;flex-wrap:wrap;}
.lag-adjust-tip{margin:0;font-size:.76rem;line-height:1.4;color:rgba(255,255,255,.62);}

/* ghost buttons (Reset here, Change Photo below) now read correctly on the dark backdrop */
.lag-btn-ghost{background:transparent;color:#f2f3f5;border:2px solid rgba(255,255,255,.36);}
.lag-btn-ghost:hover:not(:disabled){background:rgba(234,185,16,.14);border-color:rgba(234,185,16,.7);color:#ffd76a;}
.lag-btn-sm{padding:9px 20px;font-size:.82rem;}
.lag-btn:disabled{cursor:not-allowed;opacity:.45;transform:none;}

@media(max-width:480px){
  .lag-adjust{padding:14px 13px 11px;border-radius:16px;}
  .lag-round{width:38px;height:38px;border-radius:12px;font-size:1.15rem;}
  .lag-zoom-val{min-width:46px;font-size:.82rem;}
  .lag-adjust-foot{justify-content:center;}
  .lag-adjust-tip{text-align:center;}
}
@media(prefers-reduced-motion:reduce){
  .lag-adjust,.lag-round,.lag-btn,.lag-btn-ghost{transition:none;}
}

/* ---- layout safety net: these must always win ---- */
.lag-wrap{max-width:560px;margin:0 auto 48px;}
.lag-preview{max-width:100%;}
#lag-canvas{display:block;width:100%;height:auto;max-width:100%;}
.lag-top,.lag-controls{max-width:560px;margin-left:auto;margin-right:auto;}