/* FitAI — shared design tokens & primitives */

:root {
  /* Brand */
  --brand-700: #4A22B5;
  --brand-600: #6C3CE1;
  --brand-500: #8A5CF0;
  --brand-400: #A989FA;
  --brand-50:  #F3EEFF;
  --brand-25:  #FAF7FF;

  /* Accents in gradient */
  --accent-pink: #F26BC9;
  --accent-blue: #4FB6FF;

  /* Neutrals */
  --ink-900: #15101F;
  --ink-700: #2C2440;
  --ink-500: #5A5170;
  --ink-400: #837A95;
  --ink-300: #B6AEC4;
  --ink-200: #DCD6E5;
  --ink-100: #ECE7F2;
  --ink-50:  #F6F4FA;
  --bg:      #FAFAFC;
  --white:   #FFFFFF;

  /* Semantic */
  --success: #1FB57A;
  --warn:    #F0A93A;
  --danger:  #E5484D;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #6C3CE1 0%, #8A5CF0 50%, #F26BC9 100%);
  --grad-brand-soft: linear-gradient(135deg, #F3EEFF 0%, #FBE8F4 100%);
  --grad-fashion: linear-gradient(140deg, #6C3CE1 0%, #B65CF0 40%, #F26BC9 70%, #FFA585 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(21,16,31,.06), 0 1px 1px rgba(21,16,31,.04);
  --shadow-md: 0 6px 18px rgba(76,40,170,.08), 0 2px 6px rgba(21,16,31,.04);
  --shadow-lg: 0 20px 48px rgba(76,40,170,.16), 0 6px 16px rgba(21,16,31,.06);
  --shadow-brand: 0 16px 40px rgba(108,60,225,.32);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 56px;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--ink-100);
}
.nav-left { display: flex; align-items: center; gap: 40px; }
.nav-right { display: flex; align-items: center; gap: 14px; }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.logo-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--grad-brand);
  position: relative;
  box-shadow: 0 6px 16px rgba(108,60,225,.35);
}
.logo-mark::after {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  -webkit-mask: radial-gradient(circle at 60% 40%, transparent 0 4px, #000 5px);
          mask: radial-gradient(circle at 60% 40%, transparent 0 4px, #000 5px);
}
.logo .dot { color: var(--brand-600); }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-500);
}
.nav-links a:hover { color: var(--ink-900); }

.lang-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--ink-700);
  background: var(--white);
}
.lang-pill svg { width: 14px; height: 14px; }

.credits-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 13px; font-weight: 600;
}
.credits-pill .pip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(108,60,225,.16);
}
.credits-pill.empty { background: #FDECEC; color: var(--danger); }
.credits-pill.empty .pip { background: var(--danger); box-shadow: 0 0 0 4px rgba(229,72,77,.16); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600;
  border-radius: var(--r-pill);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-ghost { color: var(--ink-700); }
.btn-ghost:hover { color: var(--ink-900); }
.btn-outline {
  border: 1px solid var(--ink-200); color: var(--ink-900); background: var(--white);
}
.btn-outline:hover { border-color: var(--brand-600); color: var(--brand-700); }
.btn-primary {
  background: var(--grad-brand); color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn-xl { height: 64px; padding: 0 36px; font-size: 17px; }
.btn-block { width: 100%; }

.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ink-200); background: var(--white);
  color: var(--ink-700);
}

/* ---------- Cards & utility ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.eyebrow .spark { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.04; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.1; }
h3 { font-weight: 600; font-size: 18px; line-height: 1.3; }
p  { margin: 0; color: var(--ink-500); line-height: 1.55; }

.muted { color: var(--ink-500); }
.tiny { font-size: 12px; color: var(--ink-400); }

/* gradient text */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 80px;
  padding: 36px 56px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-400); font-size: 13px;
  border-top: 1px solid var(--ink-100);
}
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink-700); }

/* Reusable upload tile */
.upload-tile {
  position: relative;
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(108,60,225,.05) 0%, transparent 60%),
    var(--white);
  padding: 28px;
  display: flex; flex-direction: column; align-items: stretch;
  transition: border-color .2s ease, background .2s ease;
}
.upload-tile:hover { border-color: var(--brand-500); }
.upload-tile.filled { border-style: solid; border-color: var(--ink-100); padding: 0; overflow: hidden; }

.upload-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.upload-head h3 { font-size: 15px; }
.upload-head .pill {
  font-size: 11px; font-weight: 600; color: var(--brand-700); background: var(--brand-50);
  padding: 4px 10px; border-radius: var(--r-pill);
}

.upload-drop {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 36px 16px;
  text-align: center;
}
.upload-icon {
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--grad-brand-soft);
  display: grid; place-items: center;
  color: var(--brand-600);
}
.upload-drop .title { font-weight: 600; color: var(--ink-900); font-size: 15px; }
.upload-drop .sub { font-size: 13px; color: var(--ink-400); max-width: 260px; }
.upload-drop .formats { font-size: 11px; color: var(--ink-400); margin-top: 4px; }
.browse-btn {
  margin-top: 4px;
  height: 36px; padding: 0 16px;
  font-size: 13px; font-weight: 600; color: var(--brand-700);
  background: var(--brand-50); border-radius: var(--r-pill);
}

/* Input */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.input-wrap {
  position: relative;
  display: flex; align-items: center;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-wrap:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(108,60,225,.12);
}
.input-wrap input {
  flex: 1; height: 52px;
  padding: 0 16px;
  background: transparent; border: none; outline: none;
  font-size: 15px; color: var(--ink-900); font-family: inherit;
}
.input-wrap input::placeholder { color: var(--ink-300); }
.input-wrap .lead { padding-left: 16px; color: var(--ink-400); display: flex; align-items: center; }
.input-wrap .lead + input { padding-left: 10px; }
.input-wrap .trail {
  padding: 0 14px; color: var(--ink-400);
  display: flex; align-items: center; cursor: pointer;
}
.input-wrap .trail:hover { color: var(--ink-700); }

/* checkbox */
.check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--ink-500); line-height: 1.5;
}
.check input { appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; min-width: 18px;
  border: 1.5px solid var(--ink-300); border-radius: 5px;
  margin-top: 1px; cursor: pointer; position: relative;
  background: var(--white); transition: background .15s, border-color .15s;
}
.check input:checked { background: var(--brand-600); border-color: var(--brand-600); }
.check input:checked::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
}
.check a { color: var(--brand-700); font-weight: 600; }

/* Social button */
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--ink-900);
  transition: border-color .15s ease, background .15s ease;
}
.social-btn:hover { border-color: var(--ink-400); background: var(--ink-50); }

/* Divider with text */
.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--ink-400); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--ink-100);
}



/* ---------- Homepage layout ---------- */
:root { --page-pad: 48px; }
body { font-family: var(--font-sans), 'Noto Sans SC', 'Noto Sans JP', sans-serif; }

.nav { padding: 16px var(--page-pad); }
.nav-credits-mobile { display: none; }
@media (max-width: 900px) {
  :root { --page-pad: 18px; }
  .nav-links { display: none; }
  .nav-right .credits-pill { display: none; }
  .nav-right .btn-ghost { display: none; }
  .nav-right .lang-pill { padding: 0 10px; height: 34px; }
  .nav-right .btn-primary { height: 34px; padding: 0 14px; font-size: 13px; }
  .nav-credits-mobile {
    display: flex; justify-content: center;
    padding: 8px var(--page-pad);
    background: var(--brand-25);
    border-bottom: 1px solid var(--brand-50);
    font-size: 12px; font-weight: 600; color: var(--brand-700);
    gap: 8px; align-items: center;
  }
  .nav-credits-mobile .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); }
}

.home { max-width: 1280px; margin: 0 auto; padding: 36px var(--page-pad) 80px; }

/* HERO */
.hero { text-align: center; margin-bottom: 28px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 5.4vw, 56px); line-height: 1.05;
  letter-spacing: -.025em; margin-top: 14px;
}
.hero h1 .em {
  font-style: italic;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p {
  max-width: 640px; margin: 16px auto 0;
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--ink-500); text-wrap: pretty;
}

/* INPUT BAR */
.input-bar {
  background: white; border: 1px solid var(--ink-100); border-radius: 24px;
  box-shadow: 0 24px 60px rgba(76,40,170,.08), 0 4px 14px rgba(21,16,31,.04);
  padding: 18px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: stretch; position: relative;
}
@media (max-width: 880px) { .input-bar { grid-template-columns: 1fr; } }

.photo-slot {
  width: 200px; aspect-ratio: 4/5; border-radius: 16px;
  background:
    radial-gradient(60% 50% at 50% 30%, #FFE3CF 0%, transparent 70%),
    linear-gradient(160deg, #EAD9FF 0%, #F7E5FF 100%);
  border: 1.5px solid var(--brand-50);
  position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 880px) { .photo-slot { width: 100%; aspect-ratio: 16/9; } }
.photo-slot::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 56%; height: 80%; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 36% 16% at 50% 14%, #3A2417 60%, transparent 62%),
    radial-gradient(ellipse 55% 50% at 50% 70%, #B07A60 60%, transparent 62%);
}
@media (max-width: 880px) {
  .photo-slot::after {
    width: 22%; height: 90%; left: 80%; bottom: -8%;
    background:
      radial-gradient(ellipse 70% 14% at 50% 12%, #3A2417 60%, transparent 62%),
      radial-gradient(ellipse 90% 50% at 50% 65%, #B07A60 60%, transparent 62%);
  }
}
.photo-slot .badge {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 9px; background: rgba(255,255,255,.94);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; color: var(--ink-700);
  display: inline-flex; align-items: center; gap: 6px;
}
.photo-slot .badge .dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
.photo-slot .change {
  position: absolute; right: 10px; top: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid; place-items: center; color: var(--ink-700);
}
.photo-slot .lab {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  background: rgba(21,16,31,.7); backdrop-filter: blur(8px);
  border-radius: 10px; padding: 8px 10px; color: white;
  font-size: 11px;
  display: flex; justify-content: space-between; align-items: center;
}
.photo-slot .lab .step {
  background: rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  padding: 2px 8px; font-weight: 700; font-size: 10px;
}

.source-col {
  display: flex; flex-direction: column;
  background: var(--brand-25); border-radius: 16px;
  padding: 16px; gap: 12px; min-height: 100%;
}
.source-col .head { display: flex; justify-content: space-between; align-items: center; }
.source-col .head .lab {
  font-size: 11px; font-weight: 700; color: var(--ink-700);
  text-transform: uppercase; letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: 6px;
}
.source-col .head .lab .n {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-600); color: white;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
}
.source-tabs { display: inline-flex; background: white; border-radius: var(--r-pill); padding: 3px; gap: 0; }
.source-tabs button {
  height: 26px; padding: 0 12px; font-size: 12px; font-weight: 600;
  color: var(--ink-500); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 5px;
}
.source-tabs button.active { background: var(--ink-900); color: white; }
.source-tabs button svg { width: 12px; height: 12px; }

.url-input { display: flex; gap: 8px; align-items: stretch; }
.url-input .input-wrap {
  flex: 1; background: white;
  border: 1px solid var(--ink-100); border-radius: 12px;
}
.url-input .input-wrap input { height: 46px; padding-left: 14px; font-size: 14px; }
.url-input .input-wrap .lead { padding-left: 12px; color: var(--brand-600); }
.url-input .grab {
  height: 46px; padding: 0 16px; border-radius: 12px;
  background: var(--grad-brand); color: white;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-brand);
}

.retailers-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.retailer-mini {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px;
  background: white; border: 1px solid var(--ink-100);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
}
.retailer-mini:hover { border-color: var(--brand-400); }
.retailer-mini .lg {
  width: 16px; height: 16px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: white;
}
.retailer-mini.amazon .lg { background: #232F3E; }
.retailer-mini.rakuten .lg { background: #BF0000; }
.retailer-mini.zozo .lg { background: #000; }
.retailer-mini.uniqlo .lg { background: #E10612; }
.retailer-mini.mercari .lg { background: #FF424D; }
.retailer-mini.affiliate {
  background: linear-gradient(135deg, #1FB57A, #B7E76A);
  border: none; color: #0B3A24; font-weight: 700;
}
.retailer-mini.affiliate .lg { background: transparent; }

.or-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: .08em;
  margin: 4px 0;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--ink-100);
}

.upload-line {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: white; border: 1.5px dashed var(--ink-200);
  cursor: pointer; font-size: 13px; color: var(--ink-700);
}
.upload-line:hover { border-color: var(--brand-500); }
.upload-line .ico {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--grad-brand-soft); color: var(--brand-600);
  display: grid; place-items: center;
}
.upload-line .formats { margin-left: auto; font-size: 11px; color: var(--ink-400); }

.gen-col {
  display: flex; flex-direction: column;
  gap: 10px; justify-content: center; min-width: 220px;
}
@media (max-width: 880px) { .gen-col { min-width: 0; } }
.gen-btn {
  height: 100%; min-height: 92px;
  padding: 18px 22px; border-radius: 16px;
  background: var(--grad-brand); color: white;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-brand);
  position: relative; overflow: hidden;
  transition: transform .15s;
}
.gen-btn:hover { transform: translateY(-2px); }
.gen-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shine 4s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 250% 0; } 100% { background-position: -250% 0; } }
.gen-btn .sp { font-size: 22px; }
.gen-btn .t1 { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; }
.gen-btn .t2 { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 880px) {
  .gen-btn { min-height: 64px; flex-direction: row; gap: 12px; }
}

/* PIPELINE */
.pipeline {
  margin-top: 18px;
  background: white; border: 1px solid var(--ink-100); border-radius: 18px;
  padding: 16px 22px;
  display: flex; align-items: center; gap: 14px;
  overflow-x: auto;
}
.pipe-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pipe-step .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink-100);
  display: grid; place-items: center;
  color: var(--ink-400);
  font-size: 12px; font-weight: 700;
  transition: background .3s, color .3s;
}
.pipe-step.done .dot { background: var(--success); color: white; }
.pipe-step.active .dot {
  background: var(--brand-600); color: white;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108,60,225,.4); }
  50% { box-shadow: 0 0 0 8px rgba(108,60,225,0); }
}
.pipe-step .label { font-size: 13px; }
.pipe-step .label .t { font-weight: 700; color: var(--ink-900); }
.pipe-step .label .d { font-size: 11px; color: var(--ink-400); margin-top: 1px; }
.pipe-arrow { color: var(--ink-200); flex-shrink: 0; }
@media (max-width: 760px) {
  .pipeline { gap: 10px; padding: 14px; }
  .pipe-step .label .d { display: none; }
  .pipe-step .label .t { font-size: 12px; }
}

/* RESULT */
.result-section {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 20px;
}
@media (max-width: 1080px) { .result-section { grid-template-columns: 1fr; } }

.tryon-card {
  background: white; border: 1px solid var(--ink-100);
  border-radius: 24px; overflow: hidden; position: relative;
}
.tryon-image {
  aspect-ratio: 4/5;
  background:
    radial-gradient(60% 50% at 50% 25%, #FFE3CF 0%, transparent 70%),
    linear-gradient(155deg, #E2C9FF 0%, #F7E5FF 50%, #FFD8E8 100%);
  position: relative; overflow: hidden;
}
.tryon-image::before {
  content: ""; position: absolute; left: 50%; top: 8%;
  transform: translateX(-50%);
  width: 20%; aspect-ratio: 5/6;
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  background: radial-gradient(70% 60% at 50% 40%, #F2C7A8, #C99577 80%);
  box-shadow: inset -6px -8px 14px rgba(0,0,0,.18);
}
.tryon-image::after {
  content: ""; position: absolute; left: 50%; top: 25%;
  transform: translateX(-50%);
  width: 56%; height: 75%;
  background: linear-gradient(160deg, #E8D5B8 0%, #D9C3A0 70%);
  border-radius: 40% 40% 30% 30% / 18% 18% 8% 8%;
  box-shadow:
    inset 12px 0 20px rgba(0,0,0,.06),
    inset -12px 0 20px rgba(0,0,0,.06),
    inset 0 -20px 30px rgba(0,0,0,.08);
}
.tryon-texture {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.08) 3px 4px);
  mix-blend-mode: overlay; pointer-events: none;
}
.tryon-top {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  z-index: 3;
}
.tryon-quality {
  padding: 6px 11px;
  background: rgba(21,16,31,.75); backdrop-filter: blur(10px);
  color: white; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.tryon-quality .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(242,107,201,.3);
}
.tryon-tools { display: flex; gap: 6px; }
.tryon-tools button {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  color: var(--ink-700);
  display: grid; place-items: center;
}
.tryon-tools button:hover { background: white; }
.tryon-tools button.heart:hover { color: var(--accent-pink); }

.tryon-foot {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  z-index: 3;
}
.tryon-foot .ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--grad-brand); color: white;
  display: grid; place-items: center; flex-shrink: 0;
}
.tryon-foot .meta { flex: 1; min-width: 0; }
.tryon-foot .meta .t { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.tryon-foot .meta .d {
  font-size: 11px; color: var(--ink-500); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tryon-foot .meta .d .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.tryon-foot .badge-aff {
  background: linear-gradient(135deg, #1FB57A, #B7E76A);
  color: #0B3A24;
  font-size: 10px; font-weight: 800;
  padding: 3px 7px; border-radius: 4px;
  letter-spacing: .04em;
}

.variants {
  padding: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.variant {
  aspect-ratio: 1; border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer; overflow: hidden; position: relative;
}
.variant.active { border-color: var(--brand-600); }
.v1 { background: linear-gradient(155deg, #E8D5B8, #D9C3A0); }
.v2 { background: linear-gradient(155deg, #3A4A6F, #2A2F44); }
.v3 { background: linear-gradient(155deg, #C0E0E5, #8FA8B5); }
.v4 { background: linear-gradient(155deg, #6B3F2E, #3F2419); }
.variant .vc {
  position: absolute; left: 50%; bottom: 0;
  width: 60%; height: 80%; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 36% 18% at 50% 14%, rgba(0,0,0,.45) 60%, transparent 62%),
    radial-gradient(ellipse 55% 50% at 50% 70%, rgba(0,0,0,.35) 60%, transparent 62%);
}
.variant .price-tag {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(21,16,31,.8); color: white;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
}

.style-stack { display: flex; flex-direction: column; gap: 16px; }

.detected-card {
  background: white; border: 1px solid var(--ink-100);
  border-radius: 20px; padding: 20px 22px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-head .badge-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: white; flex-shrink: 0;
}
.card-head .h-text { flex: 1; }
.card-head h3 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 19px;
  letter-spacing: -.01em;
}
.card-head .h-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

.detect-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 600px) { .detect-grid { grid-template-columns: repeat(2, 1fr); } }
.detect-item {
  padding: 12px; border-radius: 12px;
  background: var(--brand-25);
  border: 1px solid var(--brand-50);
}
.detect-item .l {
  font-size: 10px; font-weight: 700; color: var(--brand-700);
  text-transform: uppercase; letter-spacing: .06em;
}
.detect-item .v {
  font-size: 14px; font-weight: 700; color: var(--ink-900); margin-top: 4px;
}
.detect-item .vs { font-size: 11px; color: var(--ink-500); margin-top: 1px; }

.vibe-card {
  background: linear-gradient(160deg, #221839 0%, #3A2D63 55%, #5B47A8 100%);
  color: white;
  border-radius: 20px; padding: 22px;
  position: relative; overflow: hidden;
}
.vibe-card::before {
  content: ""; position: absolute; top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(242,107,201,.22), transparent 72%);
}
.vibe-card .card-head h3 { color: white; }
.vibe-card .card-head .h-sub { color: rgba(255,255,255,.65); }
.vibe-card .card-head .badge-ico { background: rgba(255,255,255,.16); }

.vibe-list { position: relative; z-index: 1; display: grid; gap: 10px; }
.vibe-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center; padding: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; backdrop-filter: blur(10px);
}
.vibe-row .em {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  line-height: 1.1;
  color: white;
  background: linear-gradient(120deg, #FFD8B0, #FFBFE7);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  min-width: 84px; max-width: 120px; text-align: center;
  word-break: keep-all; overflow-wrap: anywhere;
}
.vibe-row .text .l { font-weight: 700; font-size: 14px; }
.vibe-row .text .d { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.vibe-row .score {
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.16);
  padding: 4px 9px; border-radius: var(--r-pill);
}

.look-card {
  background: white; border: 1px solid var(--ink-100);
  border-radius: 20px; padding: 20px 22px;
}
.look-card .head-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 10px;
}
.look-card .head-row h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  letter-spacing: -.01em;
}
.look-card .head-row .sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.look-card .head-row .aff-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, #1FB57A, #B7E76A);
  color: #0B3A24;
  padding: 4px 8px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 5px;
}
.look-card .head-row .aff-badge svg { width: 10px; height: 10px; }

.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } }

.product {
  border: 1px solid var(--ink-100); border-radius: 14px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  cursor: pointer;
}
.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-400);
}
.product .ph { aspect-ratio: 1; position: relative; overflow: hidden; }
.product .ph::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 70%;
}
.product .source {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 8px 3px 5px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(21,16,31,.08);
}
.product .source .lg {
  width: 14px; height: 14px; border-radius: 3px;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 800; color: white;
}
.product .match {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 7px;
  background: rgba(21,16,31,.75); backdrop-filter: blur(8px);
  color: white; border-radius: 4px;
  font-size: 10px; font-weight: 700;
}
.product .body { padding: 12px 14px; }
.product .cat {
  font-size: 10px; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.product .name {
  font-size: 13px; font-weight: 700; color: var(--ink-900);
  margin-top: 2px; line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product .price-row {
  margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.product .price { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.product .price .cur { font-size: 11px; color: var(--ink-400); margin-right: 1px; }
.product .cta {
  font-size: 11px; font-weight: 700; color: var(--brand-700);
  display: inline-flex; align-items: center; gap: 3px;
}

.p1 .ph { background: linear-gradient(160deg, #FAF2E2, #E8D5B8); }
.p1 .ph::after {
  background: linear-gradient(to bottom, transparent 20%, #D9BD7F 22%, #D9BD7F 95%, transparent 97%);
  clip-path: polygon(34% 0, 66% 0, 78% 100%, 22% 100%);
  width: 50%; height: 80%;
}
.p2 .ph { background: linear-gradient(160deg, #F8F8F6, #E2E0DA); }
.p2 .ph::after {
  background: linear-gradient(180deg, #F5F5F2 0%, #E0DDD4 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 20% 20%;
  width: 55%; height: 38%; top: 60%;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.1);
}
.p3 .ph { background: linear-gradient(160deg, #F2F0EC, #DAD6CC); }
.p3 .ph::after {
  background:
    radial-gradient(ellipse at center, #C9CACC 30%, transparent 32%),
    radial-gradient(ellipse at 50% 30%, #E8E9EB 25%, transparent 27%);
  width: 45%; height: 45%; border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px #B0B2B5,
    inset 0 0 0 12px transparent,
    inset 0 0 0 14px #C9CACC;
}

.duo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .duo-row { grid-template-columns: 1fr; } }

.palette-card, .scene-card {
  background: white; border: 1px solid var(--ink-100);
  border-radius: 20px; padding: 20px 22px;
}
.swatch-row { display: flex; gap: 8px; margin-bottom: 12px; }
.swatch {
  flex: 1; aspect-ratio: 1; border-radius: 12px;
  position: relative; overflow: hidden; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.swatch .lab {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  background: rgba(255,255,255,.92); color: var(--ink-900);
  padding: 3px 5px; border-radius: 4px;
  font-size: 9px; font-weight: 700; text-align: center;
}
.swatch.s1 { background: #E8D5B8; }
.swatch.s2 { background: #F5F2EC; }
.swatch.s3 { background: #6B3F2E; }
.swatch.s4 { background: #5A6E5B; }
.swatch.s5 { background: #C9CACC; }
.palette-card .hint { font-size: 12px; color: var(--ink-500); line-height: 1.5; }
.palette-card .hint strong { color: var(--ink-900); font-weight: 700; }

.scene-list { display: flex; flex-direction: column; gap: 8px; }
.scene-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 12px;
  background: var(--brand-25);
  border: 1px solid var(--brand-50);
}
.scene-item .emo {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: white; border: 1px solid var(--ink-100);
  flex-shrink: 0;
}
.scene-item .t { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.scene-item .d { font-size: 11px; color: var(--ink-500); margin-top: 1px; }
.scene-item .pct {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: var(--brand-700);
}

.disclosure {
  margin-top: 28px;
  padding: 14px 18px;
  background: var(--brand-25);
  border: 1px solid var(--brand-50);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--ink-500);
  display: flex; align-items: center; gap: 10px;
  line-height: 1.5;
}
.disclosure svg { color: var(--brand-600); flex-shrink: 0; }

.footer { padding: 28px var(--page-pad); flex-wrap: wrap; gap: 16px; justify-content: center; text-align: center; }
@media (min-width: 760px) { .footer { justify-content: space-between; text-align: left; } }

/* ---- PHP production overrides ---- */
.file-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.photo-slot{cursor:pointer}
.photo-slot.has-preview,.upload-line.has-preview{overflow:hidden;background:white;border-style:solid}
.photo-slot .photo-preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo-slot.has-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,16,31,.05),rgba(21,16,31,.45));z-index:1;pointer-events:none}
.photo-slot .badge,.photo-slot .change,.photo-slot .lab{z-index:2}
.upload-line{position:relative;cursor:pointer;min-height:58px}
.upload-line .garment-preview-img{width:58px;height:58px;object-fit:cover;border-radius:12px;margin-left:auto;border:1px solid var(--ink-100)}
.url-input input{width:100%}
.form-error{max-width:760px;margin:18px auto 0;color:var(--danger);font-weight:600;text-align:center;background:#fff;border:1px solid #ffd2d4;border-radius:var(--r-pill);padding:10px 16px}
.quota-note{display:none}
.generate-submit{border:0;text-align:left}
.extract-status{margin-top:10px;font-size:12px;color:var(--ink-500)}
.extracted-card{
  margin-top:10px; display:flex; align-items:center; gap:12px;
  padding:10px 12px; background:white; border:1px solid var(--ink-100);
  border-radius:14px; box-shadow:0 1px 2px rgba(20,16,28,.04);
}
.extracted-card .ec-img{
  width:64px; height:64px; object-fit:cover; border-radius:10px;
  background:var(--ink-50); flex-shrink:0;
}
.extracted-card .ec-meta{ flex:1; min-width:0; }
.extracted-card .ec-title{ font-size:13px; font-weight:700; color:var(--ink-900); }
.extracted-card .ec-src{
  font-size:11px; color:var(--ink-500); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.extracted-card .ec-x{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--ink-100);
  background:white; color:var(--ink-500); font-size:18px; line-height:1;
  cursor:pointer; flex-shrink:0; padding:0;
}
.extracted-card .ec-x:hover{ background:var(--ink-50); color:var(--ink-900); }
.lang-menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang-menu .lang-pill{height:36px}.lang-menu .lang-pill.active{border-color:var(--brand-500);color:var(--brand-700);background:var(--brand-50)}
.home-form{margin:0}
.nav .btn-primary{white-space:nowrap}
.hidden-source{display:none!important}
@media(max-width:920px){.nav{position:relative;padding:16px 20px}.nav-left{gap:18px}.nav-links{display:none}.nav-right{gap:8px}.home{padding:24px 18px 50px}.input-bar{grid-template-columns:1fr}.gen-col{width:100%}.gen-btn{width:100%;justify-content:center}.pipeline{overflow-x:auto;justify-content:flex-start}.result-section{grid-template-columns:1fr}.footer{padding:22px 20px}.lang-menu{order:3;width:100%}}

/* ---- Auth pages (login / signup) ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:radial-gradient(1100px 600px at 50% -10%, var(--brand-50), transparent 60%), var(--bg)}
.auth-card{width:100%;max-width:420px;background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:36px 32px;box-shadow:var(--shadow-md)}
.auth-card .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-900);font-weight:700;font-size:18px;margin-bottom:18px}
.auth-card .brand .mark{width:24px;height:24px;border-radius:8px;background:var(--grad-brand);display:inline-block}
.auth-card h2{font-family:var(--font-display);font-size:28px;margin:6px 0 6px;color:var(--ink-900);letter-spacing:-.01em}
.auth-card>p{margin:0 0 22px;color:var(--ink-500);font-size:14px;line-height:1.5}
.auth-card .stack{display:flex;flex-direction:column;gap:14px}
.auth-card .stack .field{display:flex;flex-direction:column;gap:6px}
.auth-card .stack .field>span{font-size:11px;font-weight:600;color:var(--ink-500);letter-spacing:.04em;text-transform:uppercase}
.auth-card .stack input{height:46px;padding:0 14px;border:1px solid var(--ink-200);border-radius:var(--r-md);font:inherit;font-size:14px;color:var(--ink-900);background:var(--white);outline:none;transition:border-color .15s, box-shadow .15s}
.auth-card .stack input:focus{border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-50)}
.auth-card .stack button.primary,.auth-card .primary{height:46px;border:0;border-radius:var(--r-md);background:var(--grad-brand);color:var(--white);font-weight:600;font-size:14px;cursor:pointer;box-shadow:var(--shadow-brand);transition:transform .1s ease, box-shadow .15s}
.auth-card .stack button.primary:hover,.auth-card .primary:hover{transform:translateY(-1px)}
.auth-card>p:last-child{margin:18px 0 0;text-align:center;font-size:13px;color:var(--ink-500)}
.auth-card>p:last-child a{color:var(--brand-700);font-weight:600;text-decoration:none}
.auth-card>p:last-child a:hover{text-decoration:underline}

/* ---- App shell (dashboard / status) ---- */
.shell{max-width:1180px;margin:0 auto;padding:0 var(--page-pad, 24px) 60px}
.shell .nav{padding:18px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink-100);margin-bottom:32px}
.shell .nav .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-900);font-weight:700;font-size:18px}
.shell .nav .brand .mark{width:22px;height:22px;border-radius:7px;background:var(--grad-brand);display:inline-block}
.shell .nav .nav-right{display:flex;gap:10px;align-items:center}
.shell .nav .primary,.shell .nav .ghost{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent}
.shell .nav .primary{background:var(--grad-brand);color:var(--white);box-shadow:var(--shadow-brand)}
.shell .nav .primary:hover{transform:translateY(-1px)}
.shell .nav .ghost{background:var(--white);color:var(--ink-700);border-color:var(--ink-200)}
.shell .nav .ghost:hover{border-color:var(--ink-300);color:var(--ink-900)}

/* ---- Dashboard ---- */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:36px}
.dash-card{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-sm)}
.dash-card small{display:block;font-size:12px;color:var(--ink-500);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.dash-card h2{font-family:var(--font-display);font-size:36px;margin:0;color:var(--ink-900);letter-spacing:-.02em}
.shell>h2{font-family:var(--font-display);font-size:22px;margin:36px 0 18px;color:var(--ink-900)}
.history{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.history-card{display:block;background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:14px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .15s, box-shadow .15s, border-color .15s}
.history-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-400)}
.history-card .mini{width:100%;aspect-ratio:1/1;background:var(--grad-brand-soft);border-radius:14px;margin-bottom:12px;overflow:hidden}
.history-card h3{margin:0 0 4px;font-size:14px;color:var(--ink-900)}
.history-card p{margin:0;font-size:12px;color:var(--ink-500)}

/* ---- Status page ---- */
.result{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.result.show{margin-top:8px}
@media (max-width:920px){.result{grid-template-columns:1fr}}
.panel{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-sm)}
.panel .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--brand-50);color:var(--brand-700);border-radius:var(--r-pill);font-size:12px;font-weight:600;margin-bottom:14px}
.panel .tag b{font-weight:700}
.tryon{aspect-ratio:3/4;background:var(--grad-brand-soft);border-radius:var(--r-lg);display:grid;place-items:center;margin-bottom:14px}
.silhouette{width:60%;aspect-ratio:1/2;background:linear-gradient(180deg,var(--brand-300,#C8B4F0),var(--brand-500));border-radius:120px 120px 40px 40px;opacity:.5;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.7}}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.actions .primary,.actions .ghost{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent}
.actions .primary{background:var(--grad-brand);color:var(--white);box-shadow:var(--shadow-brand)}
.actions .ghost{background:var(--white);color:var(--ink-700);border-color:var(--ink-200)}
.advice{display:flex;flex-direction:column;gap:12px}
.advice-card{background:var(--ink-50);border:1px solid var(--ink-100);border-radius:var(--r-md);padding:14px 16px}
.advice-card h4{margin:0 0 6px;font-size:14px;color:var(--ink-900);font-weight:600}
.advice-card p{margin:0;font-size:13px;color:var(--ink-500);line-height:1.55}
.advice-card .tag{display:inline-block;padding:3px 10px;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--r-pill);font-size:11px;color:var(--ink-700);margin-right:4px;margin-top:4px}
.pill{display:inline-flex;align-items:center;padding:5px 12px;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--r-pill);font-size:12px;color:var(--ink-700)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:8px}
.product{display:block;padding:14px;background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-md);text-decoration:none;color:inherit;font-size:12px;line-height:1.5;transition:border-color .15s, box-shadow .15s}
.product:hover{border-color:var(--brand-400);box-shadow:var(--shadow-sm)}
.product strong{color:var(--ink-900);font-size:13px}
.product small{color:var(--ink-500)}
.product p{margin:6px 0 0;color:var(--ink-500)}
.product .product-cta{
  display:inline-block; margin-top:10px;
  padding:6px 12px; border-radius:999px;
  background:var(--brand-50, #f4ecff); color:var(--brand-700, #6b3ed1);
  font-size:12px; font-weight:700;
  transition:background .15s, color .15s;
}
.product:hover .product-cta{ background:var(--brand-700, #6b3ed1); color:#fff; }

/* ---- Policy / static text pages ---- */
.policy-doc{max-width:720px;margin:0 auto;padding:16px 0 60px;color:var(--ink-700);line-height:1.7;font-size:15px}
.policy-doc h1{font-family:var(--font-display);font-size:36px;letter-spacing:-.02em;color:var(--ink-900);margin:0 0 24px}
.policy-doc h3{font-family:var(--font-sans);font-size:17px;color:var(--ink-900);margin:28px 0 10px}
.policy-doc p{margin:0 0 14px}
.policy-doc ul{margin:0 0 18px;padding-left:22px}
.policy-doc ul li{margin-bottom:6px}
.policy-doc a{color:var(--brand-700);text-decoration:none;border-bottom:1px solid var(--brand-200,#D4C2F8)}
.policy-doc a:hover{color:var(--brand-600)}
.policy-foot{margin-top:32px;padding-top:18px;border-top:1px solid var(--ink-100);font-size:12px;color:var(--ink-500)}

/* ---------- share.php ---------- */
.share-body{background:var(--bg);min-height:100vh}
.share-shell{max-width:640px;margin:0 auto;padding:16px 16px 48px}
.share-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 0 18px}
.share-nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink-900)}
.share-nav .brand .mark{width:28px;height:28px;border-radius:8px;background:var(--grad-brand);box-shadow:0 4px 12px rgba(108,60,225,.32)}
.share-lang{display:flex;gap:4px}
.share-lang a{padding:6px 10px;border-radius:999px;font-size:13px;color:var(--ink-500);font-weight:500;background:rgba(255,255,255,.6)}
.share-lang a.on{background:var(--brand-50);color:var(--brand-700)}
.share-main{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:8px}
.share-figure{margin:0;width:100%;max-width:540px;animation:share-in 240ms ease both}
.share-card-img{width:100%;height:auto;display:block;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);background:var(--brand-25)}
.share-caption{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink-700);text-align:center;margin:18px 8px 0;line-height:1.4}
.share-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 32px;border-radius:var(--r-pill);background:var(--grad-brand);color:var(--white);font-weight:600;font-size:17px;box-shadow:var(--shadow-brand);transition:transform .12s ease}
.share-cta:hover{transform:translateY(-1px)}
.share-supporting{color:var(--ink-500);font-size:14px;text-align:center;margin:-6px 8px 0}
.share-expired{padding:48px 16px;text-align:center}
.share-expired h1{font-family:var(--font-display);font-weight:600;font-size:28px;color:var(--ink-900);margin:0 0 12px}
.share-expired p{color:var(--ink-500);font-size:15px;line-height:1.5;margin:0 0 24px;max-width:380px;margin-left:auto;margin-right:auto}
.share-foot{text-align:center;color:var(--ink-400);font-size:12px;margin-top:40px}
@keyframes share-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.share-figure{animation:none}}
@media (min-width:769px){.share-shell{max-width:720px;padding-top:32px}.share-figure{max-width:540px}.share-cta{min-width:360px}}
@media (max-width:480px){.share-figure{max-width:none}.share-cta{width:100%;max-width:none}}

/* ---------- status.php share menu ---------- */
.share-menu{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.share-menu .share-btn{padding:10px 16px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--ink-100);color:var(--ink-700);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}
.share-menu .share-btn:hover{border-color:var(--brand-300);color:var(--brand-700)}
.share-menu .share-btn.primary{background:var(--grad-brand);color:var(--white);border-color:transparent;box-shadow:0 4px 12px rgba(108,60,225,.24)}
.share-menu .share-btn:disabled{opacity:.5;cursor:not-allowed}
.share-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink-900);color:var(--white);padding:12px 20px;border-radius:var(--r-pill);font-size:14px;opacity:0;transition:all .22s ease;pointer-events:none;z-index:200}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* =================================================================
   REDESIGNED HERO — 2026-05
   Overrides earlier .hero / .input-bar / .photo-slot rules.
   ================================================================= */

main.home{
  position:relative;
  background:#FBF8F3;
  overflow:hidden;
}
main.home::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60vw 50vh at 8% 18%, rgba(243,238,255,.9), transparent 60%),
    radial-gradient(50vw 50vh at 92% 30%, rgba(255,205,176,.45), transparent 55%),
    radial-gradient(40vw 40vh at 70% 85%, rgba(242,107,201,.18), transparent 60%);
  z-index:0; pointer-events:none;
}
main.home > *{position:relative; z-index:1}

/* --- Hero grid --- */
.hero{
  max-width:1280px;
  margin:0 auto;
  padding:48px 56px 24px;
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
  text-align:left;
}
.hero-copy{min-width:0}
.hero-copy .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px;
  border-radius:var(--r-pill);
  background:var(--white);
  border:1px solid var(--ink-100);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--brand-700);
}
.hero-copy .eyebrow .spark{
  width:6px;height:6px;border-radius:50%;
  background:var(--brand-600);
  box-shadow:0 0 0 4px rgba(108,60,225,.16);
}
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(36px, 5vw, 64px);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--ink-900);
  margin:18px 0 16px;
}
.hero-lede{
  font-size:16px; line-height:1.55;
  color:var(--ink-500);
  max-width:520px;
  margin:0 0 24px;
}

/* Retailer flat strip (replaces .retailers-mini under URL field) */
.retailers-flat{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 14px;
  font-size:12.5px; color:var(--ink-400);
  margin-bottom:24px;
}
.retailers-flat .lab{
  font-weight:700; color:var(--ink-700);
  letter-spacing:.04em; text-transform:uppercase; font-size:11px;
}
.retailers-flat .sep{
  width:3px;height:3px;border-radius:50%;
  background:var(--ink-300);
}
.retailers-flat .r{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-700); font-weight:500;
}
.retailers-flat .r .g{
  width:18px;height:18px;border-radius:5px;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--white);
}
.retailers-flat .r.more{color:var(--ink-500); font-weight:500}

/* Form card wraps input-bar + submit-row */
.form-card{
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--r-xl);
  padding:18px;
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:14px;
}
.form-card .form-error{
  /* override the centered pill style for inside the card */
  max-width:none; margin:0;
  text-align:left; border-radius:var(--r-md);
  background:#FDECEC; color:#9B1C1C; border-color:#F8D7DA;
  font-size:13px;
}

/* Override .input-bar — two-column inside form-card */
.form-card .input-bar{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:14px;
  align-items:stretch;
  border-radius:0;
}

/* Photo slot becomes a small square */
.form-card .photo-slot{
  position:relative;
  aspect-ratio:1/1.18;
  width:auto;
  min-height:0;
  padding:0;
  border-radius:var(--r-md);
  overflow:hidden;
  background:linear-gradient(160deg,#F1ECFF 0%,#FFE6F5 60%,#FFE0CC 100%);
  border:1.5px dashed var(--ink-200);
  cursor:pointer;
  display:block;
}
.form-card .photo-slot::after{ display:none; }
.form-card .photo-slot .silhouette{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -48%);
  height:78%; width:auto;
  z-index:0;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.form-card .photo-slot:hover .silhouette{
  transform:translate(-50%, -50%) scale(1.03);
}
.form-card .photo-slot .badge{
  position:absolute; top:10px; left:10px;
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  font-size:11px; font-weight:600; color:var(--ink-700);
  z-index:2;
}
.form-card .photo-slot .badge .dot{
  width:5px;height:5px;border-radius:50%;background:var(--success);
}
.form-card .photo-slot .change{
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink-700);
  display:grid; place-items:center;
  z-index:2;
}
.form-card .photo-slot .lab{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:#fff;
  z-index:2;
  flex-wrap:wrap;
}
.form-card .photo-slot .lab .step{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(21,16,31,.78); color:#fff;
  font-weight:700; font-size:11px;
}
.form-card .photo-slot .lab > span:not(.step){
  padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(21,16,31,.5); color:#fff;
  font-weight:500;
}
.form-card .photo-slot.has-preview{background:#000}
.form-card .photo-slot.has-preview .silhouette{display:none}
.form-card .photo-slot .photo-preview-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:1;
}
.form-card .photo-slot.has-preview::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(21,16,31,.05),rgba(21,16,31,.5));
  z-index:1; pointer-events:none; display:block;
}

/* Source column tweaks inside the form-card */
.form-card .source-col{
  display:flex; flex-direction:column; gap:10px;
  min-width:0;
}
.form-card .source-col .head{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.form-card .source-col .head .lab{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-400);
}
.form-card .source-col .head .lab .n{
  display:inline-grid; place-items:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--brand-50); color:var(--brand-700);
  font-size:10px; font-weight:700;
}
.form-card .source-tabs{
  background:var(--ink-50);
}

.form-card .url-input{
  display:flex; gap:8px; align-items:stretch;
  padding:6px 6px 6px 14px;
  background:var(--ink-50);
  border:1px solid var(--ink-100);
  border-radius:var(--r-md);
}
.form-card .url-input .input-wrap{
  flex:1; display:flex; align-items:center; gap:8px;
  background:transparent; border:none;
  min-width:0;
}
.form-card .url-input .input-wrap .lead{color:var(--ink-400); padding:0}
.form-card .url-input .input-wrap input{
  flex:1; min-width:0;
  height:40px; padding:0;
  border:none; background:transparent; outline:none;
  font:inherit; font-size:14px; color:var(--ink-900);
}
.form-card .url-input .input-wrap input::placeholder{color:var(--ink-300)}
.form-card .url-input .grab{
  height:38px; padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--ink-900); color:#fff;
  font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  border:none;
}
.form-card .url-input .grab:hover{background:var(--brand-700)}

.form-card .upload-line{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border:1.5px dashed var(--ink-200);
  background:var(--ink-50);
  border-radius:var(--r-md);
  min-height:54px;
  cursor:pointer;
  position:relative;
}
.form-card .upload-line:hover{border-color:var(--brand-500); background:var(--brand-25)}

/* Submit row inside form-card */
.submit-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px dashed var(--ink-100);
}
.submit-meta{
  font-size:12.5px; color:var(--ink-500);
}
.submit-meta strong{color:var(--ink-900); font-weight:700; margin-right:6px}

.submit-pill{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 22px 0 16px;
  border-radius:var(--r-pill);
  background:var(--ink-900); color:#fff;
  font-size:14.5px; font-weight:600; letter-spacing:.005em;
  box-shadow:0 10px 22px rgba(21,16,31,.22);
  position:relative; overflow:hidden;
  border:none; cursor:pointer;
  transition:transform .12s ease;
}
.submit-pill:hover{transform:translateY(-1px)}
.submit-pill::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .8s ease;
  pointer-events:none;
}
.submit-pill:hover::before{transform:translateX(100%)}
.submit-pill .sp{
  width:22px; height:22px; border-radius:50%;
  background:var(--grad-brand);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 4px 10px rgba(108,60,225,.5);
}
.submit-pill .t{display:inline-flex; align-items:baseline; gap:8px}
.submit-pill .t .sec{font-size:11.5px; font-weight:500; color:#B6AEC4}
.submit-pill[disabled]{opacity:.6; cursor:wait}

/* --- Right-side demo card --- */
.demo{
  position:relative;
  border-radius:var(--r-xl);
  background:var(--white);
  border:1px solid var(--ink-100);
  box-shadow:var(--shadow-lg);
  padding:14px;
}
.demo .float-tag{
  position:absolute;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  background:var(--white);
  border:1px solid var(--ink-100);
  box-shadow:var(--shadow-md);
  font-size:12px; font-weight:600;
  z-index:4; white-space:nowrap;
}
.demo .float-tag .ico{
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
}
.demo .float-tag.t1{top:-14px; left:-22px}
.demo .float-tag.t2{
  top:32%; right:-30px;
  background:var(--ink-900); color:#fff; border-color:var(--ink-900);
}
.demo .float-tag.t3{bottom:8%; left:-20px}

.demo-stage{
  position:relative;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(170deg,#FFE9D8 0%,#F8DCE9 50%,#E5D6FF 100%);
}
.demo-stage .d-figure{
  position:absolute;
  top:14%; left:50%; transform:translateX(-50%);
  width:80px; height:80px; border-radius:50%;
  background:#4b3a52;
  box-shadow:0 0 0 8px rgba(255,255,255,.4);
}
.demo-stage .d-figure::after{
  content:""; position:absolute;
  bottom:-330%; left:50%; transform:translateX(-50%);
  width:340%; height:300%;
  border-radius:60% 60% 20% 20% / 50% 50% 20% 20%;
  background:linear-gradient(180deg,#E8DCC8 0%,#D9C7AB 60%,#C9B79A 100%);
  box-shadow:inset 0 -30px 40px rgba(0,0,0,.12);
}
.demo-stage .d-cardigan{
  position:absolute;
  top:30%; left:50%; transform:translateX(-50%);
  width:74%; height:48%;
  background:radial-gradient(80% 60% at 50% 0%, #F5EAD3 0%, #E7D6B2 60%, #D2BB91 100%);
  clip-path:polygon(15% 0%, 85% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.08));
}
.demo-stage .d-cardigan::after{
  content:""; position:absolute;
  top:8%; left:50%; transform:translateX(-50%);
  width:5px; height:84%;
  background:linear-gradient(180deg,#B89A6E,#9B8158);
  border-radius:2px;
}

.demo-stage .d-toggle{
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-flex; padding:3px;
  background:rgba(21,16,31,.7); backdrop-filter:blur(8px);
  border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600;
}
.demo-stage .d-toggle button{
  padding:5px 11px; border-radius:var(--r-pill);
  color:rgba(255,255,255,.65);
  border:none; background:none; cursor:pointer;
}
.demo-stage .d-toggle button.active{background:#fff; color:var(--ink-900)}

.demo-stage .d-quality{
  position:absolute; top:14px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  font-size:11px; font-weight:700; color:var(--ink-900);
}
.demo-stage .d-quality .pip{
  width:5px;height:5px;border-radius:50%;background:var(--success);
}

.demo-stage .d-tools{
  position:absolute; top:50%; right:14px; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:8px;
}
.demo-stage .d-tools button{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  color:var(--ink-700); display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(21,16,31,.1);
  border:none; cursor:pointer;
  transition:transform .15s ease, color .15s ease;
}
.demo-stage .d-tools button:hover{transform:scale(1.05); color:var(--brand-600)}

.demo-stage .d-ticket{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px 10px 10px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(21,16,31,.12);
}
.demo-stage .d-ticket .thumb{
  width:42px; height:42px; flex:none; border-radius:9px;
  background:linear-gradient(160deg,#E7D6B2,#C9B79A);
  position:relative;
}
.demo-stage .d-ticket .thumb::after{
  content:""; position:absolute; inset:6px; border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
}
.demo-stage .d-ticket .info{flex:1; min-width:0}
.demo-stage .d-ticket .name{
  font-size:12.5px; font-weight:600; color:var(--ink-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.demo-stage .d-ticket .row2{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--ink-500); margin-top:2px;
  flex-wrap:wrap;
}
.demo-stage .d-ticket .row2 .src{
  display:inline-flex; align-items:center;
  padding:2px 7px; border-radius:var(--r-pill);
  background:#FF9900; color:#fff;
  font-weight:700; font-size:10px;
}
.demo-stage .d-ticket .row2 .price{
  font-family:var(--font-display); font-weight:600;
  color:var(--ink-900); font-size:13px;
}
.demo-stage .d-ticket .row2 .dot{color:var(--ink-300)}
.demo-stage .d-ticket .buy{
  height:34px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--ink-900); color:#fff;
  font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.demo-stage .d-ticket .buy:hover{background:var(--brand-700)}

.variants-rail{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; margin-top:14px;
}
.variants-rail .var{
  aspect-ratio:1/1.1;
  border-radius:12px;
  position:relative; overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color .15s ease, transform .15s ease;
}
.variants-rail .var:hover{transform:translateY(-2px)}
.variants-rail .var.active{border-color:var(--ink-900)}
.variants-rail .var .price{
  position:absolute; left:6px; bottom:6px;
  padding:2px 7px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  font-size:10px; font-weight:700; color:var(--ink-900);
  white-space:nowrap;
}
.variants-rail .var.v1{background:linear-gradient(160deg,#E7D6B2,#C9B79A)}
.variants-rail .var.v2{background:linear-gradient(160deg,#1F2A44,#3B4868)}
.variants-rail .var.v3{background:linear-gradient(160deg,#9CB89F,#6A8C70)}
.variants-rail .var.v4{background:linear-gradient(160deg,#5C4634,#3A2A1E)}

/* --- Proof bar (replaces .pipeline) --- */
.proof-bar{
  max-width:1280px;
  margin:8px auto 0;
  padding:0 56px 48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.proof{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 4px;
  border-top:1px solid var(--ink-100);
}
.proof .n{
  font-family:var(--font-display); font-weight:500;
  font-size:32px; line-height:1; letter-spacing:-0.02em;
  color:var(--ink-900);
  flex:none; min-width:54px;
}
.proof .n .u{font-size:18px; color:var(--ink-500); margin-left:1px}
.proof .t{font-size:13px; font-weight:600; color:var(--ink-900); margin-bottom:2px}
.proof .d{font-size:12.5px; color:var(--ink-500); line-height:1.45}

/* --- Responsive --- */
@media (max-width: 1080px){
  .hero{
    grid-template-columns:1fr;
    gap:40px;
    padding:36px 28px 20px;
  }
  .demo .float-tag.t1{left:8px}
  .demo .float-tag.t2{right:8px}
  .demo .float-tag.t3{left:8px}
  .proof-bar{
    grid-template-columns:repeat(2,1fr);
    padding:0 28px 36px;
  }
}
@media (max-width: 720px){
  .hero{padding:24px 16px 16px}
  .hero-title{font-size:38px}
  .hero-lede{font-size:15px}
  .form-card{padding:14px}
  .form-card .input-bar{
    grid-template-columns:1fr;
    gap:12px;
  }
  .form-card .photo-slot{aspect-ratio:16/9; width:100%}
  .form-card .photo-slot .silhouette{height:84%}
  .submit-row{flex-direction:column; align-items:stretch; gap:10px}
  .submit-pill{justify-content:center}
  .submit-meta{text-align:center}
  .retailers-flat{font-size:11.5px; gap:6px 10px}
  .retailers-flat .sep{display:none}
  .demo{padding:10px}
  .demo .float-tag{display:none}
  .demo-stage .d-tools{right:10px}
  .demo-stage .d-tools button{width:32px;height:32px}
  .demo-stage .d-ticket{left:10px; right:10px; bottom:10px; padding:8px 10px 8px 8px}
  .proof-bar{grid-template-columns:1fr; padding:0 20px 28px}
  .proof .n{font-size:28px; min-width:48px}
}

/* =================================================================
   GUIDED TWO-STEP FLOW — 2026-05
   index.php (step 1: photo + consent) · garment.php (step 2: garment)
   ================================================================= */

main.flow{
  position:relative;
  min-height:calc(100vh - 156px);
  background:
    radial-gradient(58vw 46vh at 14% 0%, rgba(243,238,255,.85), transparent 62%),
    radial-gradient(48vw 44vh at 90% 6%, rgba(255,205,176,.4), transparent 60%),
    var(--bg);
}
.flow-inner{
  max-width:560px;
  margin:0 auto;
  padding:44px var(--page-pad) 64px;
  display:flex; flex-direction:column;
}

/* --- Step indicator --- */
.step-indicator{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:26px;
}
.step{ display:inline-flex; align-items:center; gap:8px; }
.step-dot{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-size:13px; font-weight:700;
  background:var(--ink-100); color:var(--ink-400);
}
.step-name{ font-size:13px; font-weight:600; color:var(--ink-400); }
.step.active .step-dot{
  background:var(--grad-brand); color:#fff;
  box-shadow:0 4px 12px rgba(108,60,225,.32);
}
.step.active .step-name{ color:var(--ink-900); }
.step.done .step-dot{ background:var(--success); color:#fff; }
.step.done .step-name{ color:var(--ink-700); }
.step-line{ width:46px; height:2px; border-radius:2px; background:var(--ink-200); }
.step-line.done{ background:var(--success); }

/* --- Headings --- */
.flow-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(28px,5vw,38px); line-height:1.12;
  letter-spacing:-.02em; color:var(--ink-900);
  text-align:center; margin:0 0 10px;
}
.flow-sub{
  text-align:center; font-size:15px; line-height:1.55;
  color:var(--ink-500); margin:0 auto 22px; max-width:444px;
}

/* --- The card --- */
.flow-card{
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  padding:20px;
  display:flex; flex-direction:column; gap:16px;
}
.flow .form-error{ margin:0 auto 18px; }

/* --- Step 1: photo dropzone --- */
.photo-drop{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:16px; min-height:320px; padding:36px 24px;
  border:1.6px dashed var(--ink-200);
  border-radius:var(--r-lg);
  background:
    radial-gradient(72% 58% at 50% 16%, #FFE7D6 0%, transparent 70%),
    linear-gradient(165deg, #EFE9FF 0%, #FBF3FF 52%, #FFEFE2 100%);
  cursor:pointer; overflow:hidden;
  transition:border-color .18s ease;
}
.photo-drop:hover{ border-color:var(--brand-500); }
.photo-drop .silhouette{
  height:130px; width:auto; aspect-ratio:auto;
  background:none; opacity:1; animation:none; border-radius:0;
  pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(58,46,74,.12));
}
.photo-drop .drop-cta{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center;
}
.photo-drop .drop-cta-text{ font-size:15px; font-weight:700; color:var(--ink-900); }
.photo-drop .drop-formats{ font-size:12px; color:var(--ink-500); }
.photo-drop .badge{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);
  font-size:11.5px; font-weight:700; color:var(--ink-700);
}
.photo-drop .badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); }
.photo-drop .change{
  position:absolute; top:12px; right:12px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink-700);
  display:none; place-items:center;
}
.photo-drop .photo-preview-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.photo-drop.has-preview{ border-style:solid; border-color:var(--ink-100); background:#000; }
.photo-drop.has-preview .silhouette,
.photo-drop.has-preview .drop-cta{ display:none; }
.photo-drop.has-preview .change{ display:grid; }
.photo-drop.has-preview::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(21,16,31,.04), rgba(21,16,31,.34));
  pointer-events:none;
}

/* face warning inside the card */
.flow-card .person-warn{
  margin:0; max-width:none; text-align:left;
  border-radius:var(--r-md);
}

/* --- Consent row --- */
.consent-row{
  align-items:center;
  padding:13px 14px;
  background:var(--brand-25);
  border:1px solid var(--brand-50);
  border-radius:var(--r-md);
  font-size:13px; color:var(--ink-700);
  cursor:pointer;
}
.consent-row span{ line-height:1.45; }
.consent-row a{ color:var(--brand-700); font-weight:700; }
.consent-row a:hover{ text-decoration:underline; }

/* --- Step 1 CTA (full-width) --- */
.flow-cta{
  width:100%; justify-content:center;
  height:52px; font-size:15.5px;
}
.flow-cta[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.flow-cta[disabled]:hover{ transform:none; }
.flow-reassure{
  text-align:center; font-size:12px; color:var(--ink-400);
  margin:2px 0 0;
}

/* --- Step 2: person chip --- */
.person-chip{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px 10px 10px;
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  margin-bottom:18px;
}
.person-chip-img{
  width:48px; height:48px; flex:none;
  border-radius:12px; object-fit:cover; background:var(--ink-50);
}
.person-chip-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.person-chip-label{ font-size:13px; font-weight:700; color:var(--ink-900); }
.person-chip-back{ font-size:12px; color:var(--brand-700); font-weight:600; }
.person-chip-back:hover{ text-decoration:underline; }
.person-chip-check{
  width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--success); color:#fff;
  display:grid; place-items:center;
}

/* --- Step 2: garment input blends into the white card --- */
.flow-card .source-col{ background:transparent; padding:0; min-height:0; gap:12px; }
.flow-card .submit-row{ margin-top:2px; }

@media (max-width:600px){
  .flow-inner{ padding:30px 16px 48px; }
  .flow-card{ padding:16px; }
  .photo-drop{ min-height:248px; padding:28px 18px; }
  .photo-drop .silhouette{ height:104px; }
  .step-line{ width:30px; }
  .flow-card .submit-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .flow-card .submit-row .submit-pill{ justify-content:center; }
  .flow-card .submit-meta{ text-align:center; }
}

/* =================================================================
   M5 — image-design flow (frontend-stream)
   Prefixes:
     .style-*      upload entry (index.php)
     .report-*     report page (report.php)
     .look-*       try-on render slots
     .recommend-*  product cards
     .dash-*       dashboard list cards
     .commerce-disclosure — shared, must stay in card top-half
   ================================================================= */

/* ---- shared layout shell ---- */
.style-shell { padding-bottom: 60px; }
.style-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink-900);
  text-align: center;
  max-width: 760px;
  margin: 24px auto 24px;
}
.style-hero-sub {
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 18px;
  text-align: center;
}
.style-hero-pills {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
}
.style-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 500;
}
.style-hero-pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}
.style-ad-banner {
  position: relative;
  min-height: 158px;
  margin: 22px auto 22px;
  padding: 22px 24px;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 42%),
    linear-gradient(120deg, #15101F 0%, #264B48 56%, #A46B3E 100%);
  color: #fff;
  box-shadow: 0 20px 46px rgba(37, 25, 70, .18);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
}
.style-ad-banner::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -44px;
  width: 168px;
  height: 246px;
  background: rgba(255, 214, 122, .18);
  transform: rotate(18deg);
  pointer-events: none;
}
.style-ad-copy,
.style-ad-visual {
  position: relative;
  z-index: 1;
}
.style-ad-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #FFF1C2;
  font-size: 12px;
  font-weight: 700;
}
.style-ad-title {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 5.6vw, 42px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}
.style-ad-body {
  max-width: 340px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.5;
}
.style-ad-meta {
  margin-top: 12px;
  color: #FFE39A;
  font-size: 12px;
  font-weight: 700;
}
.style-ad-visual {
  min-height: 112px;
}
.style-ad-photo {
  position: absolute;
  right: 54px;
  top: 0;
  width: 72px;
  height: 96px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0)),
    #F6D9BC;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}
.style-ad-photo::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #6B4A3B;
}
.style-ad-photo::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 12px;
  height: 36px;
  border-radius: 18px 18px 6px 6px;
  background: #4A7C72;
}
.style-ad-report {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 94px;
  padding: 12px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .20);
}
.style-ad-report span {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: #D9D2EA;
}
.style-ad-report span + span { margin-top: 7px; }
.style-ad-report span:nth-child(1) { width: 74px; background: #6C3CE1; }
.style-ad-report span:nth-child(2) { width: 54px; }
.style-ad-report span:nth-child(3) { width: 66px; }
.style-goal-optional {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-400);
  line-height: 1.5;
}

/* ---- upload progress stepper (index.php) ---- */
.style-upload-progress {
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--ink-50);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.style-upload-progress-label {
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.5;
}
.style-upload-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.style-upload-step {
  position: relative;
  padding: 6px 8px 6px 22px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-400);
  border-radius: var(--r-sm, 8px);
  background: var(--white);
  border: 1px solid var(--ink-100);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.style-upload-step::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-200);
  transform: translateY(-50%);
}
.style-upload-step.is-active {
  color: var(--brand-700);
  font-weight: 600;
  border-color: var(--brand-200, var(--brand-400));
  background: var(--brand-25, var(--brand-50));
}
.style-upload-step.is-active::before {
  background: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.18);
}
.style-upload-step.is-complete {
  color: #1E6F49;
}
.style-upload-step.is-complete::before {
  background: #1E6F49;
}
@media (max-width: 560px) {
  .style-upload-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- index: upload card ---- */
.style-upload-card { display: flex; flex-direction: column; gap: 18px; }
.style-goal-block { border: 0; padding: 0; margin: 0; }
.style-goal-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 10px;
  letter-spacing: .01em;
}
.style-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.style-chip {
  position: relative;
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 13px; font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.style-chip input { position: absolute; opacity: 0; pointer-events: none; }
.style-chip:has(input:checked) {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-700);
}
.style-chip:hover { border-color: var(--brand-400); }

/* ---- upload drop zone ---- */
.style-drop {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 210px;
  padding: 24px;
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 50% 0%, rgba(108,60,225,.04) 0%, transparent 60%), var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  overflow: hidden;
}
.style-drop:hover, .style-drop.is-dragover {
  border-color: var(--brand-500);
  background: var(--brand-25);
}
.style-file-input {
  position: absolute; inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none;
}
.style-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.style-drop-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--grad-brand-soft);
  color: var(--brand-600);
  display: grid; place-items: center;
}
.style-drop-title { font-weight: 600; font-size: 15px; color: var(--ink-900); }
.style-drop-sub   { font-size: 13px; color: var(--ink-500); }
.style-drop-formats { font-size: 11px; color: var(--ink-400); margin-top: 4px; }

.style-drop-preview { position: relative; width: 100%; }
.style-preview-img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--ink-50);
}
.style-preview-remove {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(21,16,31,.7);
  color: #fff;
  font-size: 20px; font-weight: 600;
  display: grid; place-items: center;
  cursor: pointer;
}
.style-preview-meta {
  margin-top: 8px;
  font-size: 12px; color: var(--brand-700); font-weight: 600;
  text-align: center;
}

.style-upload-status {
  font-size: 13px; color: var(--ink-500);
  min-height: 18px;
  text-align: center;
}

/* ---- consent row (PIPL) ---- */
.style-consent { padding: 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); background: var(--ink-50); }
.style-consent-text { display: block; line-height: 1.5; }
.style-consent-main { display: block; color: var(--ink-900); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.style-consent-detail { display: block; color: var(--ink-500); font-size: 12px; }
.style-consent-detail a { color: var(--brand-700); font-weight: 600; }

.style-reassure { text-align: center; }

/* ---- report.php ---- */
.report-meta-strip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.report-meta-left  { display: flex; align-items: center; gap: 14px; }
.report-meta-thumb {
  width: 56px; height: 56px;
  border-radius: 12px; overflow: hidden;
  background: var(--ink-100);
  flex: none;
}
.report-meta-thumb img { width: 100%; height: 100%; object-fit: cover; }
.report-meta-id { font-size: 12px; color: var(--ink-400); font-weight: 500; }
.report-meta-tier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.report-meta-imgtype, .report-meta-quality {
  font-size: 11px;
  color: var(--ink-500);
  padding: 3px 8px;
  background: var(--ink-50);
  border-radius: var(--r-pill);
}

.report-tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-size: 12px; font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  color: var(--ink-700);
}
.report-tier-head    { background: #ECE7F2; color: var(--ink-700); }
.report-tier-upper   { background: #DCE6FB; color: #2A4FA8; }
.report-tier-outfit  { background: #DDF1E5; color: #1E6F49; }
.report-tier-master  {
  background: linear-gradient(135deg, #FFF6D6 0%, #FFE0A8 100%);
  color: #6B3A05;
  border: 2px solid #E0A93A;
  font-weight: 700;
}
.report-tier-rejected { background: #F4E7E7; color: #883333; }
.report-tier-unknown  { background: var(--ink-100); color: var(--ink-500); }
.report-tier-master-label {
  margin-left: 4px;
  padding: 2px 7px;
  background: #6B3A05;
  color: #FFE7B0;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.report-stage { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
/* A stage section is a flow-card; while empty (not yet filled or hidden by JS)
   it must not render as a blank framed box. */
.report-stage:empty { display: none; padding: 0; border: 0; box-shadow: none; }
.report-stage-notice { display: flex; align-items: center; gap: 10px; color: var(--ink-500); font-size: 13px; }
.report-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); animation: pulse 1.6s ease-in-out infinite; }
.report-stage-msg { line-height: 1.5; }
.report-stage-loading { color: var(--ink-500); font-size: 13px; padding: 8px 0; }
.report-quality-warning { color: var(--warn); font-size: 12px; margin: 4px 0 0; }

.report-progress-shell {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.45;
}
.report-progress-head strong {
  color: var(--brand-700);
  font-size: 12px;
  flex: none;
}
.report-progress-track {
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  overflow: hidden;
}
.report-progress-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7C3AED 0%, #D97706 100%);
  transition: width .45s ease;
}
.report-progress-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--ink-400);
  font-size: 11px;
}
.report-progress-steps span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-progress-steps span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ink-200);
  vertical-align: 1px;
}
.report-progress-steps .is-active { color: var(--brand-700); font-weight: 700; }
.report-progress-steps .is-active::before { background: var(--brand-500); }
.report-progress-steps .is-complete { color: var(--ink-600); }
.report-progress-steps .is-complete::before { background: #1E6F49; }

.report-section-label {
  font-size: 12px; font-weight: 700;
  color: var(--ink-700);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.report-summary-card p { color: var(--ink-700); font-size: 14px; line-height: 1.6; }

.report-modules-wrap { display: flex; flex-direction: column; gap: 12px; }
.report-module-card {
  padding: 14px 16px;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  background: var(--white);
  display: flex; flex-direction: column; gap: 8px;
}
.report-module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-module-name { font-weight: 700; color: var(--ink-900); font-size: 14px; }
.report-module-conclusion { font-size: 13px; color: var(--ink-700); line-height: 1.55; }
.report-module-tips { margin: 4px 0 0; padding-left: 20px; color: var(--ink-500); font-size: 12px; }
.report-module-tips li { margin-bottom: 4px; }

.report-confidence {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  border-radius: var(--r-pill);
}
.report-confidence-high    { background: #DDF1E5; color: #1E6F49; }
.report-confidence-medium  { background: var(--brand-50); color: var(--brand-700); }
.report-confidence-low     { background: #FFF1D0; color: #8A5A0A; }
.report-confidence-unknown { background: var(--ink-100); color: var(--ink-500); }

.report-disabled-wrap { display: flex; flex-direction: column; gap: 10px; }
.report-disabled-intro { color: var(--ink-500); font-size: 12px; margin: 0 0 4px; }
.report-disabled-card {
  padding: 12px 14px;
  background: var(--ink-50);
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--r-md);
  color: var(--ink-700);
}
.report-disabled-card-name { font-weight: 700; color: var(--ink-700); font-size: 13px; margin-bottom: 4px; }
.report-disabled-card-reason { font-size: 12px; color: var(--ink-500); margin: 0 0 6px; line-height: 1.5; }
.report-disabled-card-hint { font-size: 12px; color: var(--ink-700); margin: 0; line-height: 1.5; }
.report-disabled-card-hint strong { color: var(--ink-900); font-weight: 600; margin-right: 4px; }

.report-master-extras { display: flex; flex-direction: column; gap: 14px; }
.report-master-extra-block {
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC9 100%);
  border: 1px solid #E0A93A;
  border-radius: var(--r-md);
}
.report-master-extra-text { color: #6B3A05; font-size: 13px; line-height: 1.6; margin: 0; }
.report-master-extra-list { margin: 0; padding-left: 20px; color: #6B3A05; font-size: 13px; line-height: 1.6; }
.report-master-extra-list > li { margin-bottom: 10px; }
.report-master-extra-list > li:last-child { margin-bottom: 0; }
.report-master-extra-title    { font-weight: 700; color: #6B3A05; font-size: 13px; line-height: 1.5; margin-bottom: 2px; }
.report-master-extra-evidence { color: #6B3A05; font-size: 12px; line-height: 1.5; opacity: 0.9; }
.report-master-extra-advice   { color: #6B3A05; font-size: 13px; line-height: 1.55; margin-top: 2px; }
.report-master-extra-caution  { color: #8a4a08; font-size: 12px; line-height: 1.5; margin-top: 2px; font-style: italic; }

.report-warnings { padding: 10px 14px; background: #FFF6D6; border-radius: var(--r-md); }
.report-warnings ul { margin: 0; padding-left: 20px; color: #6B3A05; font-size: 12px; }

.report-effect-progress,
.report-effect-result,
.report-effect-failed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.report-effect-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-700);
}
.report-effect-progress-row strong {
  font-size: 12px;
  color: var(--brand-700);
}
.report-effect-bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  overflow: hidden;
}
.report-effect-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7C3AED 0%, #D97706 100%);
  transition: width .35s ease;
}
.report-effect-note {
  margin: 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.55;
}
.report-effect-imgwrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
}
.report-effect-img {
  display: block;
  width: 100%;
  height: auto;
}

.report-safe-intro { color: var(--ink-700); font-size: 14px; font-weight: 600; }
.report-safe-msg   { color: var(--ink-500); font-size: 13px; line-height: 1.6; }
.report-retake-hints { color: var(--ink-500); font-size: 12px; padding-left: 20px; }

.report-rejected-card {
  text-align: center; padding: 32px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.report-rejected-title { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); }
.report-rejected-msg   { color: var(--ink-500); max-width: 480px; font-size: 14px; line-height: 1.6; }

.report-not-found { text-align: center; padding: 48px 24px; }
.report-not-found-title { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); margin-bottom: 16px; }

/* ---- recommend cards ---- */
.recommend-group { margin-top: 14px; }
.recommend-group-title {
  font-weight: 700; color: var(--ink-900);
  margin-bottom: 10px; font-size: 14px;
}
.recommend-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.recommend-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.recommend-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-400);
}
.recommend-card-img {
  aspect-ratio: 1;
  background: var(--ink-50);
  overflow: hidden;
}
.recommend-card-img img { width: 100%; height: 100%; object-fit: cover; }
.recommend-card-body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.commerce-disclosure {
  /* MUST appear in the top half of the card visually. We place it first
     in the body (before title/price/CTA), so it sits at or above the
     vertical mid-line. font-size 12px / WCAG AA contrast — safety-compliance. */
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--brand-50);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  align-self: flex-start;
}
.recommend-card-title {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.35;
}
.recommend-card-price { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.recommend-card-reason {
  font-size: 11px; color: var(--ink-500); line-height: 1.5;
}
.recommend-card-reason-label { color: var(--ink-700); font-weight: 600; margin-right: 2px; }
.recommend-card-actions {
  margin-top: 8px;
  display: flex; gap: 6px; align-items: stretch;
}
.recommend-card-actions .btn {
  height: 34px; padding: 0 12px; font-size: 12px;
  flex: 1; justify-content: center;
}
.recommend-shop-link { flex: 0 0 auto; min-width: 38px; }
.recommend-look-btn { flex: 1; }

/* ---- look render slot ---- */
.look-slot { padding: 0 12px 12px; }
.look-skeleton {
  position: relative;
  border-radius: var(--r-md);
  background: var(--ink-50);
  aspect-ratio: 1;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.look-skeleton-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(108,60,225,.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: lookShimmer 1.5s linear infinite;
}
@keyframes lookShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.look-skeleton-caption {
  position: relative;
  padding: 8px 10px;
  background: rgba(21,16,31,.7);
  color: #fff;
  font-size: 11px;
  width: 100%;
  text-align: center;
}
.look-result {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.look-result-imgwrap { position: relative; }
.look-result-img { display: block; width: 100%; height: auto; }
.look-ai-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  padding: 4px 9px;
  background: rgba(21,16,31,.78);
  color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: var(--r-pill);
  letter-spacing: .04em;
}
.look-result-caption {
  padding: 6px 10px;
  font-size: 12px; color: var(--ink-500);
  text-align: center;
}
.look-result-failed {
  padding: 14px;
  background: #F4E7E7;
  color: #883333;
  font-size: 13px;
  border-radius: var(--r-md);
}

/* ---- dashboard list ---- */
.dash-empty-card { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dash-empty-text { color: var(--ink-500); font-size: 14px; }
.dash-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.dash-report-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.dash-report-card.is-openable { cursor: pointer; }
.dash-report-card.is-openable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-400);
}
.dash-report-card.is-master { border: 2px solid #E0A93A; }
.dash-report-card.is-blocked { opacity: .75; cursor: default; }
.dash-report-thumb { aspect-ratio: 4/5; background: var(--ink-50); overflow: hidden; }
.dash-report-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dash-report-thumb-empty { width: 100%; height: 100%; background: var(--grad-brand-soft); }
.dash-report-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.dash-report-tier-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-report-meta { font-size: 11px; color: var(--ink-400); }
.dash-report-cta { font-size: 12px; font-weight: 600; color: var(--brand-700); margin-top: 4px; }
.dash-report-blocked { color: var(--ink-500); }

@media (max-width: 600px) {
  .style-hero-title { font-size: 26px; }
  .style-ad-banner {
    min-height: 144px;
    padding: 18px;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 8px;
  }
  .style-ad-title { font-size: 27px; }
  .style-ad-body { font-size: 12px; max-width: 300px; }
  .style-ad-meta { font-size: 11px; }
  .style-ad-photo {
    right: 28px;
    top: 8px;
    width: 52px;
    height: 72px;
  }
  .style-ad-photo::before {
    left: 18px;
    top: 13px;
    width: 17px;
    height: 17px;
  }
  .style-ad-photo::after {
    left: 9px;
    right: 9px;
    bottom: 9px;
    height: 26px;
  }
  .style-ad-report {
    width: 70px;
    padding: 10px 8px;
  }
  .style-ad-report span:nth-child(1) { width: 52px; }
  .style-ad-report span:nth-child(2) { width: 38px; }
  .style-ad-report span:nth-child(3) { width: 46px; }
  .style-chip { height: 32px; padding: 0 12px; font-size: 12px; }
  .recommend-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Click-to-zoom lightbox (effect image + try-on results) */
.ni-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,12,24,.86);
  display:flex; align-items:center; justify-content:center;
  padding:24px; cursor:zoom-out;
  animation:ni-lb-fade .15s ease;
}
@keyframes ni-lb-fade{ from{opacity:0} to{opacity:1} }
.ni-lightbox-img{
  max-width:96vw; max-height:96vh;
  width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  object-fit:contain;
}
.report-effect-img, .look-result-img{ cursor:zoom-in; }

/* =================================================================
   DESKTOP / PC ADAPTIVE REPORT LAYOUT — 2026-05
   report.php reuses .flow-inner (max-width 560px) which is right for
   the upload form but cramps the content-heavy report into a phone
   column on wide screens. Widen the report container and lay its
   module / master-extra / disabled cards out in responsive grids so
   the page genuinely uses desktop real estate. Scoped to #report-root
   (unique to report.php) so the index upload form stays narrow.
   ================================================================= */
@media (min-width: 1000px) {
  #report-root .flow-inner { max-width: 1080px; }

  /* Enabled-module cards go 2-up; the section label spans the full row. */
  #report-root .report-modules-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  #report-root .report-modules-wrap > .report-section-label { grid-column: 1 / -1; }

  /* Master extras (up to 3 blocks) — 2-up. */
  #report-root .report-master-extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  /* Disabled modules — cards 2-up; intro + label span the row. */
  #report-root .report-disabled-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  #report-root .report-disabled-wrap > .report-section-label,
  #report-root .report-disabled-wrap > .report-disabled-intro { grid-column: 1 / -1; }

  /* Keep body copy readable — cap line length inside the wide cards. */
  #report-root .report-summary-text,
  #report-root .report-module-conclusion { max-width: 72ch; }
}

@media (min-width: 1320px) {
  #report-root .flow-inner { max-width: 1180px; }
  #report-root .report-modules-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}