/* SugarCube AI Attractiveness Test Styles
   Composes css/design-system.css primitives (.sc-card, .sc-button, .sc-input) and --sc-* tokens. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sc-color-canvas, var(--sc-color-surface));
  color: var(--sc-color-ink, var(--sc-color-brand-700));
  font-family: var(--sc-font-sans, Inter, system-ui, sans-serif);
}

button { font: inherit; }
.page { overflow: clip; }
.shell { width: min(var(--sc-container, 1180px), calc(100% - 40px)); margin: auto; }
.hero { padding: 76px 0 42px; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2, 8px);
  padding: 8px 12px;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-pill, 999px);
  color: var(--sc-color-brand-600, var(--sc-color-brand-700));
  background: var(--sc-color-surface-muted, var(--sc-color-surface));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-color-brand-600);
}

h1 {
  max-width: 920px;
  margin: 22px auto 0;
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  line-height: var(--sc-leading-tight, 0.98);
  letter-spacing: -0.065em;
  font-weight: 900;
  color: var(--sc-color-ink, var(--sc-color-brand-700));
}

.gradient {
  color: var(--sc-color-brand-600, var(--sc-color-brand-700));
}

.lead {
  max-width: 710px;
  margin: 24px auto 0;
  color: var(--sc-color-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: var(--sc-leading-copy, 1.75);
}

.trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 25px;
  color: var(--sc-color-muted);
  font-size: 0.8125rem;
  font-weight: 650;
}
.trust span::before {
  content: "✓";
  margin-right: 7px;
  color: var(--sc-color-brand-500, var(--sc-color-brand-700));
}

.tool {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
  min-height: 590px;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-xl, 1.5rem);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-sm);
}

.demo {
  position: relative;
  min-height: 590px;
  padding: 30px;
  overflow: hidden;
  background: var(--sc-color-surface-muted, var(--sc-color-surface));
}
.demo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.score-card {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 25px;
  width: min(330px, calc(100% - 50px));
  padding: 22px;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg, 1rem);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-md);
  backdrop-filter: blur(18px);
}
.score-top { display: flex; justify-content: space-between; align-items: flex-start; }
.score-label { color: var(--sc-color-muted); font-size: 0.75rem; font-weight: 700; }
.score-num { font-size: 3.6rem; line-height: 0.92; letter-spacing: -0.07em; font-weight: 900; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.score-num small { font-size: 1rem; color: var(--sc-color-muted); }
.score-badge { padding: 7px 10px; border-radius: var(--sc-radius-pill, 999px); color: #ffffff; background: var(--sc-color-brand-600); font-size: 0.6875rem; font-weight: 850; }

.bars { display: grid; gap: 10px; margin-top: 20px; }
.bar { display: grid; grid-template-columns: 56px 1fr 26px; align-items: center; gap: 8px; color: var(--sc-color-ink, var(--sc-color-brand-700)); font-size: 0.6875rem; }
.track { height: 6px; overflow: hidden; border-radius: 10px; background: var(--sc-color-border, var(--sc-color-surface-muted)); }
.track i { display: block; height: 100%; border-radius: inherit; background: var(--sc-color-brand-600); }

.bar-confidence { width: 94%; }
.bar-warmth { width: 89%; }
.bar-style { width: 91%; }

.panel { padding: 38px 38px 32px; background: var(--sc-color-surface); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.panel h2 { margin: 0; font-size: 1.55rem; letter-spacing: -0.03em; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.step { color: var(--sc-color-muted); font-size: 0.75rem; font-weight: 700; }

.upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 310px;
  margin-top: 26px;
  padding: 34px;
  border: 1px dashed var(--sc-color-border-strong, var(--sc-color-border));
  border-radius: var(--sc-radius-lg, 1rem);
  background: var(--sc-color-surface-muted, var(--sc-color-surface));
  text-align: center;
  cursor: pointer;
  transition: all var(--sc-motion-fast, 160ms) var(--sc-ease);
}
.upload:hover, .upload.drag { border-color: var(--sc-color-brand-500, var(--sc-color-brand-700)); background: var(--sc-color-brand-50, var(--sc-color-surface)); }
.upload.has-image { padding: 0; border-style: solid; overflow: hidden; }
.upload-preview { display: none; width: 100%; height: 310px; object-fit: cover; }
.upload.has-image .upload-preview { display: block; }
.upload.has-image .upload-copy { display: none; }
.upload-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 17px;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md, 0.75rem);
  color: var(--sc-color-brand-500, var(--sc-color-brand-700));
  background: var(--sc-color-brand-50, var(--sc-color-surface));
  font-size: 1.5rem;
}
.upload strong { display: block; font-size: 1rem; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.upload p { margin: 9px 0 0; color: var(--sc-color-muted); font-size: 0.8125rem; line-height: 1.6; }

.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.actions { display: flex; gap: 12px; margin-top: 18px; }

/* Page-specific button layout overrides — base provided by .sc-button */
.primary, .secondary {
  font-weight: 800;
}
.primary {
  flex: 1;
  border: 1px solid transparent;
}
.primary:hover:not(:disabled) {
  background: var(--sc-color-brand-600, var(--sc-color-brand-600));
  transform: translateY(-2px);
}
.secondary {
  display: none;
}
.secondary.block,
.secondary.show,
.result .secondary,
.uploader.has-image .secondary {
  display: inline-flex !important;
}

.privacy { display: flex; gap: 8px; margin-top: 15px; color: var(--sc-color-muted); font-size: 0.6875rem; line-height: 1.5; }
.privacy::before { content: "⌁"; color: var(--sc-color-brand-500, var(--sc-color-brand-700)); }
.result { display: none; }
.panel.result-mode .uploader { display: none; }
.panel.result-mode .result { display: block; }

.result-hero { display: flex; gap: 18px; align-items: center; margin-top: 25px; padding: 18px; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg, 1rem); background: var(--sc-color-surface-muted, var(--sc-color-surface)); }
.result-hero img { width: 108px; height: 132px; border-radius: var(--sc-radius-md, 0.75rem); object-fit: cover; }
.result-score { font-size: 4.1rem; line-height: 0.9; letter-spacing: -0.07em; font-weight: 900; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.result-score span { font-size: 1.05rem; color: var(--sc-color-muted); }
.result-title { margin-top: 12px; color: var(--sc-color-brand-500, var(--sc-color-brand-700)); font-weight: 800; }
.result-bars { display: grid; gap: 14px; margin-top: 24px; }
.result-bar { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 10px; color: var(--sc-color-ink, var(--sc-color-brand-700)); font-size: 0.75rem; }
.result-bar .track { height: 8px; }
.result-note { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--sc-color-border-strong); border-radius: 0 var(--sc-radius-md, 0.75rem) var(--sc-radius-md, 0.75rem) 0; color: var(--sc-color-muted); background: var(--sc-color-surface); font-size: 0.75rem; line-height: 1.65; }

.tool-status { display: none; margin-top: 14px; padding: 11px 13px; border-radius: var(--sc-radius-md, 0.75rem); font-size: 0.75rem; line-height: 1.55; }
.tool-status.show { display: block; }
.tool-status.loading { color: var(--sc-color-brand-800, var(--sc-color-brand-700)); background: var(--sc-color-brand-50, var(--sc-color-surface)); }
.tool-status.error { color: var(--sc-color-danger); background: var(--sc-color-danger-soft); }
.tool-status.success { color: var(--sc-color-success); background: var(--sc-color-success-soft); }

.generated-result { margin-top: 25px; overflow: hidden; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg, 1rem); background: var(--sc-color-surface-muted, var(--sc-color-surface)); }
.generated-result img { display: block; width: 100%; max-height: 470px; object-fit: contain; }

.section { padding: 108px 0; }
.section.alt { background: var(--sc-color-surface-muted, var(--sc-color-surface)); border-block: 1px solid var(--sc-color-border); }
.section-head { max-width: 730px; margin: 0 auto 52px; text-align: center; }
.kicker { color: var(--sc-color-brand-500, var(--sc-color-brand-700)); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.section h2 { margin: 14px 0 0; font-size: clamp(2rem, 4vw, 3.65rem); line-height: var(--sc-leading-tight, 1.08); letter-spacing: -0.05em; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.section-head p { margin: 18px auto 0; color: var(--sc-color-muted); line-height: var(--sc-leading-copy, 1.75); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { min-height: 275px; padding: 26px; }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sc-radius-md, 0.75rem); color: var(--sc-color-brand-500, var(--sc-color-brand-700)); background: var(--sc-color-brand-50, var(--sc-color-surface)); font-size: 1.25rem; }
.feature h3 { margin: 25px 0 0; font-size: 1.2rem; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.feature p { margin: 12px 0 0; color: var(--sc-color-muted); font-size: 0.875rem; line-height: 1.7; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step-card { position: relative; padding-top: 70px; }
.step-no { position: absolute; top: 0; left: 0; color: var(--sc-color-border, var(--sc-color-text)); font-size: 3.75rem; line-height: 1; font-weight: 900; }
.step-card h3 { margin: 0; font-size: 1.25rem; color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.step-card p { color: var(--sc-color-muted); font-size: 0.875rem; line-height: 1.75; }

.faq { max-width: 850px; margin: auto; }

.cta { padding: 78px 0; }
.cta-box { padding: 58px; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-xl, 1.5rem); background: var(--sc-color-surface-muted, var(--sc-color-surface)); text-align: center; }
.cta-box h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); color: var(--sc-color-ink, var(--sc-color-brand-700)); }
.cta-box p { color: var(--sc-color-muted); }
.cta-box .primary { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; margin-top: 18px; padding: 0 24px; text-decoration: none; }

@media (max-width: 900px) {
  .hero { padding-top: 55px; }
  .tool { grid-template-columns: 1fr; }
  .demo { min-height: 470px; }
  .panel { padding: 28px; }
  .features { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step-card { padding: 12px 0 12px 70px; }
  .step-no { font-size: 3rem; }
  .section { padding: 78px 0; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 24px, 1180px); }
  h1 { font-size: 2.65rem; }
  .tool { border-radius: var(--sc-radius-xl, 1.5rem); }
  .demo { min-height: 410px; }
  .panel { padding: 22px; }
  .upload { min-height: 270px; }
  .score-card { right: 14px; bottom: 14px; width: calc(100% - 28px); }
  .cta-box { padding: 42px 22px; }
  .actions { flex-direction: column; }
  .secondary { min-height: 44px; }
}

input, textarea { font-size: 16px; }

/* Keep the upload workflow first; the example becomes supporting content on phones. */
.hero { padding: var(--sc-space-4) 0 var(--sc-space-8); }
.hero > .shell > .eyebrow, .hero > .shell > .lead, .hero > .shell > .trust { display: none; }
.hero h1 { max-width: none; margin: 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; text-align: left; }
.tool { margin-top: var(--sc-space-3); min-height: 0; }
.demo { min-height: 420px; }
.panel { padding: var(--sc-space-4); min-width: 0; }
.panel-head { gap: var(--sc-space-2); }
.panel h2 { font-size: 1rem; }
.upload { margin-top: var(--sc-space-3); min-height: 240px; padding: var(--sc-space-4); }
.upload-preview { height: 240px; object-fit: contain; }
.actions { margin-top: var(--sc-space-3); gap: var(--sc-space-2); }
@media (max-width: 900px) {
  .hero { padding-top: var(--sc-space-3); }
  .hero h1 { font-size: 1.125rem; }
  .tool { margin-top: var(--sc-space-2); }
  .panel { order: -1; padding: var(--sc-space-3); }
  .panel-head { flex-wrap: wrap; }
  .step { font-size: .6875rem; }
  .upload { min-height: 184px; padding: var(--sc-space-3); }
  .upload-preview { height: 184px; }
  .upload-icon { width: 36px; height: 36px; margin-bottom: var(--sc-space-2); }
  .upload strong { font-size: .875rem; }
  .upload p { font-size: .75rem; line-height: 1.4; margin-block: var(--sc-space-2); }
  .actions { flex-direction: row; align-items: stretch; }
  .actions .primary, .actions .secondary { min-width: 0; padding-inline: var(--sc-space-2); font-size: .8125rem; }
  .privacy { margin-top: var(--sc-space-2); }
  .demo { min-height: 380px; }
}

.panel .actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.panel .actions .primary, .panel .actions .secondary { width: auto; min-height: 44px; }

/* A portrait card has a source, an output format and an explicit expectation. */
.attractiveness-purpose.panel{padding:var(--sc-space-6);border-radius:var(--sc-radius-xl);background:var(--sc-color-surface)}
.attractiveness-purpose .panel-head{display:block;margin-bottom:var(--sc-space-5)}.attractiveness-purpose .panel-head h2{font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.35;margin:0}.attractiveness-purpose .panel-head p{font-size:.875rem;color:var(--sc-color-muted);line-height:1.6;margin:var(--sc-space-2) 0 0}
.attractiveness-purpose h3{font-size:.875rem;line-height:1.5;margin:0 0 var(--sc-space-3)}
.attractiveness-purpose .upload{height:auto;min-height:210px;padding:var(--sc-space-6);border-radius:var(--sc-radius-lg);background:var(--sc-color-canvas)}.attractiveness-purpose .upload.has-image{height:260px;padding:0}.attractiveness-purpose .upload-preview{object-fit:contain}
.attractiveness-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sc-space-3);margin-top:var(--sc-space-5)}.attractiveness-options .sc-field{min-width:0}.attractiveness-options select{max-width:100%;width:100%;min-height:44px}
.attractiveness-expectation{padding:var(--sc-space-3);border-radius:var(--sc-radius-md);background:var(--sc-color-surface-muted);color:var(--sc-color-muted);font-size:.8125rem;line-height:1.6;margin:var(--sc-space-4) 0}
.attractiveness-purpose #cardCost{font-size:.8125rem;line-height:1.5}.attractiveness-purpose .actions{gap:var(--sc-space-2);flex-wrap:wrap}.attractiveness-purpose .actions .primary{min-height:48px;flex:1}.attractiveness-purpose .privacy{font-size:.8125rem;line-height:1.5;margin-top:var(--sc-space-3)}
@media(max-width:760px){.attractiveness-purpose.panel{padding:var(--sc-space-4)}.attractiveness-options{grid-template-columns:minmax(0,1fr)}.attractiveness-purpose .upload{min-height:180px;padding:var(--sc-space-4)}}
@media(max-width:767px){.attractiveness-purpose :is(input,textarea,select).sc-input{font-size:1rem}}

/* Keep the functional area focused on the actual user-created result. */
#tool:has(> .attractiveness-purpose) { grid-template-columns: minmax(0, 1fr); max-width: 48rem; margin-inline: auto; text-align: start; }
.attractiveness-purpose [hidden] { display: none !important; }
/* The shared marketing hero glow must not tint this editing surface. */
.page > .hero::before { display: none; }