:root{
  --navy:#1A2E53;
  --navy-deep:#0E1729;
  --navy-soft:#24406F;
  --rust:#C9502F;
  --rust-dim:#A63F24;
  --ink:#F2F4F8;
  --ink-soft:#9BA6BC;
  --ink-faint:#6B7690;
  --line:#22334F;
  --ok:#3FA98F;
  --bad:#E4573D;
  --radius:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #1B2C4C 0%, transparent 60%),
    var(--navy-deep);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",sans-serif;
  font-size:16px;
  line-height:1.6;
  overscroll-behavior:none;
}

#app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.screen{
  display:none;
  flex:1;
  flex-direction:column;
  padding:max(1.25rem,env(safe-area-inset-top)) 1.25rem calc(max(1rem,env(safe-area-inset-bottom)) + 2.4rem);
}
.screen.active{display:flex}

/* ---------------- brand ---------------- */
.brand{
  text-align:center;
  margin:0 0 2.5rem;
}
.brand-lockup{
  width:min(66%,250px);height:auto;display:block;margin:0 auto;
}
.brand-shop{
  max-width:min(46%,150px);max-height:56px;
  display:block;margin:1.1rem auto 0;object-fit:contain;
}

/* ---------------- code form ---------------- */
.code-form{
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;
  margin:0 auto;width:100%;max-width:22rem;
}

/* travelling neon on the code box, in the logo rust */
@property --neon-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.neon{
  --neon-a:0deg;
  position:relative;width:100%;padding:2px;border-radius:calc(var(--radius) + 2px);
  background:
    conic-gradient(from var(--neon-a),
      transparent 0 62%,
      color-mix(in srgb, var(--rust) 25%, transparent) 68%,
      #FF7A4D 82%,
      color-mix(in srgb, var(--rust) 25%, transparent) 94%,
      transparent 100%),
    var(--line);
  animation:neon-run 3.2s linear infinite;
}
.neon::after{
  content:"";position:absolute;inset:-14px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--neon-a),
      transparent 0 68%, color-mix(in srgb, var(--rust) 55%, transparent) 82%, transparent 96%);
  filter:blur(18px);opacity:.75;
  animation:neon-run 3.2s linear infinite;
}
@keyframes neon-run{to{--neon-a:360deg}}
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .neon{background:var(--rust);animation:none}
  .neon::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .neon,.neon::after{animation:none}
  .neon{background:linear-gradient(120deg,var(--line),var(--rust),var(--line))}
}
.neon.bad{background:var(--bad);animation:none}
.neon.bad::after{display:none}
#screen-code{justify-content:center}
#code-input{
  display:block;
  font-family:ui-monospace,"Cascadia Mono",monospace;
  font-size:1.8rem;font-weight:700;letter-spacing:.16em;
  text-align:center;direction:ltr;
  padding:.85rem 1rem;
  border-radius:var(--radius);
  border:0;
  background:#101C33;color:var(--ink);
  width:100%;
}
#code-input:focus{outline:none}
#code-input::placeholder{color:#31456A;font-weight:400;letter-spacing:.3em}

/* ---------------- buttons ---------------- */
.go-arrow{
  flex:none;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--rust);color:#fff;
  display:grid;place-items:center;
  transition:opacity .2s ease,transform .12s ease;
}
.go-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.go-arrow:disabled{opacity:.28;cursor:default}
.go-arrow:not(:disabled):active{transform:scale(.94)}

.primary,.ghost{
  font:inherit;font-weight:600;
  border-radius:var(--radius);
  padding:.95rem 1.2rem;
  border:1.5px solid transparent;
  cursor:pointer;
  width:100%;
  transition:opacity .15s ease,transform .06s ease;
}
.primary{background:var(--rust);color:#fff}
.primary:active:not(:disabled){transform:scale(.985)}
.primary:disabled{background:#2A3A56;color:var(--ink-faint);cursor:not-allowed}
.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.ghost:active{transform:scale(.985)}
button:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* ---------------- capture ---------------- */
.topbar{
  display:flex;align-items:center;
  padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;
}
.topbar-logo{margin-inline-start:auto}
.topbar-logo{height:30px;width:auto;display:block;object-fit:contain}
.shop-label{font-weight:600}

.slots{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1.25rem}
.slot{
  position:relative;
  font:inherit;color:var(--ink);cursor:pointer;padding:0;
  background:#101C33;border:1.5px dashed var(--line);border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .18s ease,transform .1s ease;
}
.slot:active{transform:scale(.99)}
.slot.filled{border-style:solid;border-color:var(--rust)}
.slot-media{
  width:100%;aspect-ratio:3/4;max-height:42vh;
  display:grid;place-items:center;overflow:hidden;
}
.slot-media img{width:100%;height:100%;object-fit:cover;display:block}
.slot-art{
  width:44%;max-height:56%;
  fill:none;stroke:var(--ink-faint);stroke-width:3;
  stroke-linejoin:round;
}
.slot-art.tall{width:38%;max-height:62%}
.slot.filled .slot-art{display:none}

/* one glyph instead of a caption: a weight for the photo that stays,
   a loop for the one that changes */
.slot-tag{
  position:absolute;top:.5rem;inset-inline-start:.5rem;
  width:26px;height:26px;border-radius:50%;
  background:rgba(10,17,33,.72);backdrop-filter:blur(4px);
  display:grid;place-items:center;
}
.slot-tag svg{
  width:14px;height:14px;fill:none;stroke:var(--ink-soft);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.slot.filled .slot-tag svg{stroke:var(--ink)}

.slot-clear{
  position:absolute;top:.5rem;inset-inline-end:.5rem;
  width:26px;height:26px;border-radius:50%;
  background:rgba(201,80,47,.9);
  display:grid;place-items:center;cursor:pointer;
}
.slot-clear svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.slot-clear[hidden]{display:none}

/* the gallery, always reachable. accept="image/*" asks Android for a
   picture, which reaches the photo apps; a bare input asks for any file
   and lands in the document manager instead. */
.slot-gallery{
  position:absolute;bottom:.5rem;inset-inline-start:.5rem;
  width:30px;height:30px;border-radius:8px;
  background:rgba(10,17,33,.72);backdrop-filter:blur(4px);
  display:grid;place-items:center;cursor:pointer;
}
.slot-gallery svg{
  width:16px;height:16px;fill:none;stroke:var(--ink-soft);
  stroke-width:1.8;stroke-linejoin:round;
}
.slot-gallery:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.slot.filled .slot-gallery{display:none}
.slot-clear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#go{margin:.4rem auto 0}
.privacy{color:var(--ink-faint);font-size:.76rem;text-align:center;margin:auto 0 0}

/* one line, about whichever slot still needs filling */
.hint{
  color:var(--ink-soft);font-size:.86rem;line-height:1.5;
  text-align:center;margin:0 0 1.1rem;min-height:2.6em;
}

/* ---------------- result ---------------- */
.result-stage{
  position:relative;flex:1;min-height:0;
  display:grid;place-items:center;
  background:#0A1121;border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.25rem;
}
#result-img,#waiting-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;display:block;
}
/* their own photo, dimmed, while the garment is on its way — an
   abstract spinner for fifteen seconds reads as a stall */
#waiting-img{filter:blur(2px) brightness(.45) saturate(.7)}
#result-img{cursor:zoom-in}
#result-img[hidden],#waiting-img[hidden]{display:none}

.expand{
  position:absolute;top:.6rem;inset-inline-end:.6rem;
  width:30px;height:30px;border-radius:8px;
  background:rgba(10,17,33,.65);backdrop-filter:blur(4px);
  display:grid;place-items:center;pointer-events:none;
}
.expand[hidden]{display:none}
.expand svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.waiting{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  width:min(62%,190px);
}
.waiting[hidden]{display:none}
/* an indeterminate sweep, not a percentage — we do not know how long
   the provider will take, and a bar that fills early is a lie */
.sweep{
  width:100%;height:3px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.sweep span{
  display:block;width:40%;height:100%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--rust),transparent);
  animation:sweep 1.5s ease-in-out infinite;
}
@keyframes sweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(360%)}
}
@media (prefers-reduced-motion:reduce){
  .sweep span{animation-duration:3.5s}
}
.waiting-label{
  margin:0;font-size:.95rem;color:var(--ink);
  transition:opacity .25s ease;min-height:1.4em;
}
.waiting-label.fade{opacity:0}
/* a light passes down their photo, so there is something to watch that
   belongs to the thing being made. Decoration, and it does not claim
   to track real progress. */
.scan{
  position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--rust) 26%, transparent) 62%,
    color-mix(in srgb, var(--rust) 55%, transparent) 88%,
    transparent);
  animation:scan 2.8s ease-in-out infinite;
  pointer-events:none;mix-blend-mode:screen;
}
.scan[hidden]{display:none}
@keyframes scan{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(300%)}
}
@media (prefers-reduced-motion:reduce){.scan{animation-duration:6s}}

.result-actions{display:flex;gap:.7rem}
.result-actions[hidden]{display:none}
.act{
  font:inherit;font-weight:600;font-size:.9rem;
  min-height:52px;padding:0 1.1rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:opacity .2s ease,transform .12s ease;
}
.act-primary{flex:1}
.act svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act-primary{background:var(--rust);border-color:var(--rust);color:#fff}
.act:disabled{opacity:.3;cursor:default}
.act[hidden]{display:none}
.act:not(:disabled):active{transform:scale(.94)}
.act:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.spent{
  text-align:center;font-size:.85rem;color:var(--rust);
  margin:.9rem 0 0;
}
.spent[hidden]{display:none}

/* agency credit, bottom of the code screen */
.powered{
  position:fixed;left:0;right:0;bottom:max(1rem,env(safe-area-inset-bottom));
  z-index:2;
  direction:ltr;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  font-size:.72rem;letter-spacing:.06em;
  color:var(--ink-faint);text-decoration:none;
  transition:color .2s ease;
}
.powered img{width:22px;height:22px;display:block;object-fit:contain}
.powered > span{opacity:.6;transition:opacity .2s ease}
.powered-domain{color:var(--ink-soft)}
.powered:hover > span,.powered:focus-visible > span{opacity:1}


/* the box edge already turned red — the words only say which red */
#turnstile-slot:empty{display:none}
#turnstile-slot{width:100%;display:flex;justify-content:center}

.error-line{
  font-size:.85rem;color:#FF9C8A;text-align:center;
  margin:0;min-height:1.2em;
}

/* ---------------- shared ---------------- */
.error{
  background:rgba(228,87,61,.14);
  border:1px solid var(--bad);
  color:#FFC9BF;
  border-radius:10px;padding:.7rem .9rem;
  font-size:.9rem;margin:.9rem 0 0;
}

/* fullscreen result */
:fullscreen #result-img,:-webkit-full-screen #result-img{max-height:100vh;max-width:100vw}