/* =========================
   Sakura Day Theme (Light Pink + Dark Text)
   ========================= */
:root{
  /* 樱花背景 */
  --bg1:#fff7fb;   /* 很浅的樱花白粉 */
  --bg2:#ffe6f1;   /* 稍深一点的樱花粉 */
  --bg3:#ffd6e6;   /* 用于点缀的更粉层 */

  /* 卡片与边框（白底粉边） */
  --card:rgba(255,255,255,.72);
  --stroke:rgba(240,155,185,.35);

  /* 文字（深色） */
  --text:#2c1b22;    /* 深梅子黑 */
  --muted:#6a3e4f;   /* 次级文字：豆沙梅 */
  --muted2:#8b5a6c;  /* 更弱的提示文字 */

  /* 主色（樱花按钮） */
  --primary:#f3a9c1;
  --primary2:#e98cab;

  /* 危险色 */
  --danger:#e85c86;

  /* 阴影（轻一点，更像纸感） */
  --shadow:0 14px 40px rgba(60,20,40,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 25% 20%, rgba(255,210,225,.60) 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 80%, rgba(255,185,210,.55) 0%, transparent 60%),
    linear-gradient(165deg, var(--bg1), var(--bg2));
}

/* 背景樱花雾：轻、柔、有空气感 */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.65), transparent 36%),
    radial-gradient(circle at 70% 78%, rgba(255,210,228,.55), transparent 40%),
    radial-gradient(circle at 55% 30%, rgba(255,190,214,.40), transparent 42%);
  pointer-events:none;
}

.wrap{
  max-width:720px;
  margin:16px auto;
  padding:18px 14px 36px;

  /* ✅ 整体外框 */
  border:1px solid rgba(200,160,175,.40);
  border-radius:18px;
  background:rgba(255,255,255,.35);
  box-shadow:0 18px 60px rgba(60,20,40,.10);
  backdrop-filter: blur(10px);
}



.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

h1{
  margin:0;
  font-size:34px;
  letter-spacing:.4px;
}

.sub{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
}

.badge{
  padding:8px 12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}

/* 卡片：白底纸感 + 粉边 */
.card{
  border:1px solid var(--stroke);
  background:var(--card);
  box-shadow:var(--shadow);
  border-radius:16px;
  padding:16px;
  backdrop-filter: blur(10px);
}

.h2{
  margin:0 0 8px;
  font-size:20px;
}

.desc{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.uploader{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* 上传控件：更“日系小清新”的浅底 */
input[type="file"]{
  max-width:100%;
  padding:10px;
  border-radius:12px;
  border:1px dashed rgba(240,155,185,.55);
  background:rgba(255,255,255,.70);
  color:var(--muted);
}

.preview{
  margin-top:14px;
}

.preview img,
.resultImgWrap img{
  width:100%;
  max-height:360px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid rgba(240,155,185,.35);
  background:rgba(255,255,255,.70);
}

.row{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

/* 基础按钮 */
.btn{
  appearance:none;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.60);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  transition:
    transform .06s ease,
    background .12s ease,
    border-color .12s ease;
}

.btn:active{ transform:translateY(1px); }

/* 主按钮：樱花奶油渐变（不荧光） */
.btn.primary{
  border-color:rgba(233,140,171,.55);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(243,169,193,.55)
    );
}

/* 幽灵按钮 */
.btn.ghost{
  background:transparent;
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.progressText{
  font-size:13px;
  color:var(--muted);
}

.progressBar{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(240,155,185,.35);
  overflow:hidden;
  background:rgba(255,255,255,.60);
}

.bar{
  height:100%;
  width:0%;
  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary2)
    );
  transition:width .25s ease;
}

.q{
  margin:6px 0 12px;
  font-size:18px;
}

.options{
  display:grid;
  gap:10px;
}

.options .btn{
  text-align:left;
}

.tiny{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted2);
}

.resultImgWrap{
  margin:10px 0 0;
}

@media (max-width:420px){
  h1{ font-size:28px; }
  .card{ padding:14px; }
}