/* Beauty AI Studio — 第 3 章結束時的前端雛形
   純靜態頁面，沒有後端、沒有資料庫、沒有任何網路請求。 */

:root{
  --ink:   #17201b;
  --mist:  #f6f8f5;
  --coral: #e56b5f;
  --sage:  #7e9b85;
  --plum:  #68485d;

  --ink-70: rgba(23,32,27,.70);
  --ink-65: rgba(23,32,27,.65);
  --ink-55: rgba(23,32,27,.55);
  --ink-40: rgba(23,32,27,.40);
  --ink-15: rgba(23,32,27,.15);
  --ink-10: rgba(23,32,27,.10);
  --ink-05: rgba(23,32,27,.05);

  --shadow-sm: 0 1px 2px rgba(23,32,27,.06);
  --shadow-xl: 0 20px 25px -5px rgba(23,32,27,.12), 0 8px 10px -6px rgba(23,32,27,.08);

  --wrap: 80rem;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"PingFang TC","Noto Sans TC","Heiti TC","Microsoft JhengHei",
              -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  background:
    radial-gradient(circle at top left, rgba(229,107,95,.12), transparent 28rem),
    linear-gradient(180deg, #fbfaf7 0%, #eef4ee 100%);
}

button,input,select,textarea{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }

/* ── 導覽列 ───────────────────────────── */

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.25rem; padding-bottom:1.25rem;
}
.brand{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.125rem; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none;
}
.brand svg{ width:1.25rem; height:1.25rem; color:var(--coral); }

.nav-links{
  display:flex; align-items:center; gap:.75rem;
  font-size:.875rem; color:var(--ink-70);
}
.nav-links a{ color:inherit; text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.credits{
  background:#fff; border-radius:.25rem;
  padding:.375rem .75rem; box-shadow:var(--shadow-sm);
}
@media (max-width:640px){ .nav-links a{ display:none; } }

/* ── Hero ─────────────────────────────── */

.hero{
    display:grid; gap:3rem;
    padding-top:2.5rem; padding-bottom:5rem;
}
@media (min-width:1024px){
    .hero{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:5rem; min-height:calc(100vh - 82px); }
}
.hero-copy{ padding-top:2rem; padding-bottom:2rem; }

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
    margin:0 0 1.5rem;
  background:#fff; border-radius:9999px;
    padding:.45rem .85rem;
    font-size:.875rem; font-weight:600; color:var(--plum);
  box-shadow:var(--shadow-sm);
}
.badge svg{ width:1rem; height:1rem; }

.hero h1{
    max-width:40rem; margin:0;
    font-size:clamp(2.6rem, 7vw, 4.75rem); font-weight:700; line-height:1.1;
    letter-spacing:-.045em;
}

.hero-sub{
    max-width:35rem; margin:1.75rem 0 0;
    font-size:clamp(1.05rem, 2vw, 1.25rem); line-height:1.85; color:var(--ink-70);
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    border-radius:.5rem; padding:.9rem 1.4rem;
    font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid transparent; box-shadow:var(--shadow-sm);
}
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:rgba(23,32,27,.9); }
.btn-coral{ background:var(--coral); color:#fff; }
.btn-coral:hover{ background:#d85b50; }
.btn-plain{ background:#fff; color:var(--ink); border-color:var(--ink-15); }
.btn-plain:hover{ background:var(--mist); }

.hero-notes{
    display:flex; flex-wrap:wrap; gap:.65rem 1.25rem;
    margin-top:1.5rem; color:var(--ink-55);
    font-size:.85rem; line-height:1.5;
}
.hero-notes span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-notes span::before{
    content:""; width:.38rem; height:.38rem; border-radius:50%;
    background:var(--sage); flex:0 0 auto;
}

.hero img{
    width:100%; height:100%; max-height:640px;
    object-fit:cover; border-radius:1rem; box-shadow:var(--shadow-xl);
}

@media (max-width:639px){
    .hero{ padding-top:1.5rem; padding-bottom:3.5rem; }
    .hero-copy{ padding-top:1rem; padding-bottom:0; }
    .hero h1 br{ display:none; }
    .hero-actions{ display:grid; }
    .btn{ width:100%; }
}

/* ── 三個賣點 ─────────────────────────── */

.value{
  border-top:1px solid var(--ink-10);
  border-bottom:1px solid var(--ink-10);
  background:rgba(255,255,255,.70);
  padding-top:2.5rem; padding-bottom:2.5rem;
}
.value-grid{ display:grid; gap:1.25rem; }
@media (min-width:768px){ .value-grid{ grid-template-columns:repeat(3,1fr); } }

.value-card{
  display:block; color:inherit; text-decoration:none; cursor:pointer;
  overflow:hidden; border-radius:.5rem;
  border:1px solid var(--ink-10); background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.value-card:hover{
  transform:translateY(-4px);
  border-color:var(--sage);
  box-shadow:0 12px 24px rgba(23,32,27,.12);
}
.value-card:focus-visible{
  outline:3px solid rgba(229,107,95,.45);
  outline-offset:4px;
}
.value-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .25s ease;
}
.value-card:hover img{ transform:scale(1.025); }
.value-card .body{ padding:1.25rem; }
.value-card h2{ margin:0; font-size:1rem; font-weight:600; }
.value-card p{ margin:.5rem 0 0; font-size:.875rem; line-height:1.5rem; color:var(--ink-65); }

/* ── Studio ───────────────────────────── */

.studio{ display:grid; gap:1.5rem; padding-top:2.5rem; padding-bottom:2.5rem; }
@media (min-width:1024px){ .studio{ grid-template-columns:360px 1fr; } }

.panel{
  border-radius:.5rem; border:1px solid var(--ink-10);
  background:#fff; box-shadow:var(--shadow-sm);
}
.panel-pad{ padding:1.25rem; }

.modules{ padding:1rem; }
.modules h2{
  margin:0; padding:0 .5rem;
  font-size:.875rem; font-weight:600; color:var(--ink-70);
}
.module-guide{ display:none; }
.module-list{ display:grid; gap:.5rem; margin-top:.75rem; }

.module{
  display:block; width:100%; text-align:left;
  border-radius:.25rem; border:1px solid var(--ink-10);
  background:#fff; color:var(--ink-70);
  padding:.75rem; cursor:pointer;
  transition:border-color .15s, background-color .15s, color .15s;
}
.module:hover{ border-color:var(--sage); }
.module.is-selected{
  border-color:var(--coral);
  background:rgba(229,107,95,.10);
  color:var(--ink);
}
.module-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.module-name{ font-weight:500; }
.module-cost{ font-size:.75rem; }
.module-desc{ margin:.25rem 0 0; font-size:.75rem; line-height:1.25rem; color:var(--ink-55); }

@media (max-width:1023px){
  .modules{ overflow:hidden; }
  .modules h2{ display:inline-block; }
  .module-guide{
    display:inline; margin:0 0 0 .35rem;
    font-size:.75rem; color:var(--ink-40);
  }
  .module-list{
    grid-auto-flow:column;
    grid-auto-columns:minmax(12rem, 76vw);
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    padding:.1rem .5rem .65rem;
    margin-left:-.5rem;
    margin-right:-.5rem;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .module{ scroll-snap-align:start; }
}

.studio-main{ display:grid; gap:1.5rem; }
@media (min-width:1024px){ .studio-main{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } }

.panel h2.section-title{ margin:0; font-size:1.125rem; font-weight:600; }
#upload-panel{ scroll-margin-top:1.25rem; }

@media (prefers-reduced-motion:reduce){
  .value-card,
  .value-card img{ transition:none; }
}

/* 上傳區 */

.dropzone{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  min-height:13rem; margin-top:1.25rem; padding:1rem;
  border:1px dashed rgba(126,155,133,.70); border-radius:.5rem;
  background:var(--mist); cursor:pointer; overflow:hidden;
}
.dropzone:hover{ background:rgba(126,155,133,.10); }
.dropzone input[type=file]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.dropzone svg{ width:2.25rem; height:2.25rem; color:var(--sage); }
.dropzone .dz-title{ margin-top:.75rem; font-weight:500; color:var(--ink); }
.dropzone .dz-hint{ margin-top:.25rem; font-size:.875rem; color:var(--ink-55); }
.dropzone.has-photo > svg,
.dropzone.has-photo > .dz-title,
.dropzone.has-photo > .dz-hint{ display:none; }
.dropzone.has-photo{
  min-height:18rem;
  background:#eef1ed;
}
.upload-preview{
  position:absolute; inset:.5rem .5rem 3.8rem;
  width:calc(100% - 1rem); height:calc(100% - 4.3rem);
  object-fit:contain; object-position:center;
}
.upload-overlay{
  position:absolute; inset:auto 0 0; display:grid; gap:.2rem;
  padding:.8rem 1rem; color:#fff; background:rgba(23,32,27,.76);
  backdrop-filter:blur(5px);
}
.upload-overlay strong{ font-size:.9rem; }
.upload-overlay small{ color:rgba(255,255,255,.78); }

.fields{ display:grid; gap:1rem; margin-top:1.25rem; }
.field{ display:grid; gap:.5rem; font-size:.875rem; font-weight:500; }
.field select,
.field input[type=text],
.field textarea{
  border-radius:.25rem; border:1px solid var(--ink-15);
  background:#fff; padding:.5rem .75rem; font-weight:400;
}
.field textarea{ min-height:6rem; resize:vertical; }
.field input[type=range]{ accent-color:var(--coral); }
.field-note{ font-size:.75rem; font-weight:400; color:rgba(23,32,27,.5); }

.btn-generate{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; border:0; border-radius:.25rem;
  background:var(--coral); color:#fff;
  padding:.75rem 1.25rem; font-weight:600;
  box-shadow:var(--shadow-sm); cursor:pointer;
}
.btn-generate svg{ width:1.25rem; height:1.25rem; }
.btn-generate:disabled{ cursor:not-allowed; background:rgba(23,32,27,.28); box-shadow:none; }
.btn-generate.is-generating svg{ animation:pulse 1s ease-in-out infinite; }

/* 結果預覽 */

.result-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:1rem;
}
.result-head p{ margin:.125rem 0 0; font-size:.875rem; color:var(--ink-55); }

.preview{
  display:grid; aspect-ratio:1/1; overflow:hidden;
  border-radius:.5rem; border:1px solid var(--ink-10);
  background:var(--mist); box-shadow:var(--shadow-sm);
}
@media (min-width:640px){ .preview{ grid-template-columns:repeat(2,1fr); } }

.preview-before{
  position:relative; min-height:12rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-05);
  font-size:.875rem; color:var(--ink-40);
}
.preview-after{
  position:relative; min-height:12rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:1.5rem; text-align:center;
  background:linear-gradient(135deg, #fff, rgba(126,155,133,.15));
}
.preview-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
}
.preview-after.completed{ padding:0; overflow:hidden; }
.preview-before:has(.preview-image),
.preview-after.completed{ background:#eef1ed; }
.processed-image{ transform:none; }
.generating-state{
  grid-column:1 / -1; display:flex; min-height:24rem;
  flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:2rem; text-align:center;
  background:linear-gradient(135deg, #fff, rgba(126,155,133,.15));
}
.generating-state p{ margin:0; }
.generating-state .pa-hint{ max-width:18rem; font-size:.8rem; line-height:1.5; color:var(--ink-55); }
.spinner{
  width:2.5rem; height:2.5rem; border-radius:50%;
  border:3px solid rgba(126,155,133,.22); border-top-color:var(--coral);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 50%{ opacity:.45; } }
.preview-after svg{ width:2.25rem; height:2.25rem; color:rgba(126,155,133,.6); }
.preview-after .pa-title{ margin:0; font-weight:500; }
.preview-after .pa-hint{ margin:0; font-size:.75rem; line-height:1.25rem; color:rgba(23,32,27,.5); }

.tag{
  position:absolute; top:.75rem;
  border-radius:.25rem; padding:.25rem .5rem;
  font-size:.75rem; font-weight:500; color:#fff;
}
.tag-before{ left:.75rem; background:rgba(23,32,27,.70); }
.tag-after{ right:.75rem; background:var(--sage); }

.result-next-step{
  margin-top:1rem; padding:1.25rem;
  border:1px solid rgba(126,155,133,.35); border-radius:.5rem;
  background:linear-gradient(135deg, rgba(126,155,133,.12), rgba(229,107,95,.08));
}
.result-next-step[hidden]{ display:none; }
.result-next-step .eyebrow{ margin-bottom:.35rem; }
.result-next-step h3{ margin:0; font-size:1.1rem; }
.result-next-step > p:not(.eyebrow){
  margin:.5rem 0 1rem; color:var(--ink-65); font-size:.875rem; line-height:1.6;
}
.result-next-step .btn{ width:100%; }

/* ── 搶先體驗表單 ── */

.early-access{
  margin-top:2.5rem; padding:5rem 0;
  scroll-margin-top:1rem;
  border-top:1px solid var(--ink-10); border-bottom:1px solid var(--ink-10);
  background:rgba(255,255,255,.72);
}
.early-access-layout{ display:grid; gap:3rem; align-items:start; }
@media (min-width:900px){
  .early-access-layout{ grid-template-columns:minmax(0,.8fr) minmax(28rem,1.2fr); gap:6rem; }
}
.early-access-copy{ padding-top:.75rem; }
.eyebrow{
  margin:0 0 .8rem; color:var(--coral);
  font-size:.85rem; font-weight:700; letter-spacing:.08em;
}
.early-access-copy h2{
  max-width:32rem; margin:0;
  font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.18; letter-spacing:-.035em;
}
.early-access-copy > p:last-child{
  max-width:34rem; margin:1.25rem 0 0;
  color:var(--ink-65); font-size:1.05rem; line-height:1.8;
}
.lead-form{
  display:grid; gap:.8rem; padding:2rem;
  border:1px solid var(--ink-10); border-radius:.75rem;
  background:#fff; box-shadow:var(--shadow-xl);
}
.lead-form input,
.lead-form textarea{
  width:100%; border:1px solid var(--ink-15); border-radius:.5rem;
  background:#fff; padding:.8rem .9rem; outline:none;
}
.lead-form input:focus,
.lead-form textarea:focus{ border-color:var(--sage); box-shadow:0 0 0 3px rgba(126,155,133,.15); }
.lead-form textarea{ min-height:8rem; resize:vertical; line-height:1.6; }
.lead-form .field{ display:block; margin-top:.35rem; }
.lead-form .btn{ width:100%; margin-top:.45rem; }
.required-mark,
.optional-mark{ margin-left:.35rem; font-size:.72rem; font-weight:500; }
.required-mark{ color:var(--coral); }
.optional-mark{ color:var(--ink-40); }
.form-note{ margin:0; text-align:center; color:var(--ink-40); font-size:.75rem; line-height:1.5; }
.form-message{
  display:none; margin:.35rem 0 0; border-radius:.5rem;
  padding:.8rem 1rem; text-align:center; font-size:.9rem; font-weight:600;
}
.form-message.is-success{ display:block; color:#315d3f; background:rgba(126,155,133,.18); }
.form-message.is-error{ display:block; color:#9c352e; background:rgba(229,107,95,.14); }

/* ── 名單後台 ── */

.admin-page{ min-height:calc(100vh - 82px); padding-top:4rem; padding-bottom:5rem; }
.admin-head{ display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
.admin-head h1{ margin:.35rem 0 0; font-size:clamp(2rem, 5vw, 3.5rem); letter-spacing:-.04em; }
.lead-count{ margin:0; color:var(--ink-55); white-space:nowrap; }
.admin-panel{ overflow:hidden; border:1px solid var(--ink-10); border-radius:.75rem; background:#fff; box-shadow:var(--shadow-sm); }
.table-wrap{ overflow-x:auto; }
.lead-table{ width:100%; border-collapse:collapse; text-align:left; }
.lead-table th,
.lead-table td{ padding:1rem 1.1rem; border-bottom:1px solid var(--ink-10); vertical-align:top; }
.lead-table th{ background:var(--mist); color:var(--ink-55); font-size:.78rem; font-weight:700; white-space:nowrap; }
.lead-table td{ font-size:.9rem; line-height:1.55; }
.lead-table tbody tr:last-child td{ border-bottom:0; }
.lead-table .time-cell{ min-width:10.5rem; white-space:nowrap; color:var(--ink-55); }
.lead-table .email-cell{ min-width:14rem; font-weight:600; word-break:break-all; }
.lead-table .problem-cell{ min-width:20rem; white-space:pre-wrap; color:var(--ink-65); }
.empty-state{ display:none; padding:5rem 1.5rem; text-align:center; color:var(--ink-55); }
.empty-state.is-visible{ display:block; }
@media (max-width:640px){
  .early-access{ padding:3.5rem 0; }
  .lead-form{ padding:1.35rem; }
  .admin-page{ padding-top:2.5rem; }
  .admin-head{ display:grid; }
}

/* ── 頁尾 ─────────────────────────────── */

.foot{
  border-top:1px solid var(--ink-10);
  padding-top:1.5rem; padding-bottom:2.5rem;
  font-size:.875rem; color:var(--ink-55);
}