:root{
  --bg0:#0b0a12;
  --bg1:#0f0d1b;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.14);
  --stroke2:rgba(255,255,255,.22);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.54);
  --gold:#f6d36b;
  --red:#ff2b4f;
  --hot:#ff6a3d;
  --ok:#2ee59d;
  --shadow: 0 22px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 900px at 15% 20%, rgba(255,43,79,.22), transparent 55%),
              radial-gradient(1200px 900px at 85% 10%, rgba(246,211,107,.18), transparent 52%),
              radial-gradient(1000px 900px at 70% 90%, rgba(130,82,255,.14), transparent 58%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.mesh{
  position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side at 25% 35%, rgba(255,43,79,.16), transparent 60%),
    radial-gradient(closest-side at 70% 30%, rgba(246,211,107,.14), transparent 58%),
    radial-gradient(closest-side at 60% 75%, rgba(50,226,156,.10), transparent 64%),
    conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,.05), rgba(255,255,255,0), rgba(255,255,255,.04));
  filter: blur(18px) saturate(1.2);
  opacity:.85;
  transform: rotate(-8deg);
}
.grain{
  position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.35;
}

.shell{
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 18px 72px;
}

.hero{max-width: 820px; margin: 0 auto 26px;}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  box-shadow: var(--shadow2);
  font-size: 12.5px;
  letter-spacing:.3px;
  color: var(--muted);
}
.dot{
  width:8px;height:8px;border-radius:99px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold));
  box-shadow: 0 0 0 4px rgba(246,211,107,.16), 0 0 24px rgba(246,211,107,.35);
}

.title{
  margin: 14px 0 10px;
  font-family: ui-serif, "STZhongsong", "SimSun", serif;
  font-size: clamp(40px, 5.2vw, 62px);
  letter-spacing: 1px;
  line-height: 1.02;
  text-wrap: balance;
}
.gold{
  color: var(--gold);
  text-shadow: 0 18px 60px rgba(246,211,107,.25);
}
.subtitle{
  margin:0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 70ch;
}

.grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 16px;
  align-items:start;
}

.panel{
  position:relative;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,43,79,.14), transparent 55%),
    radial-gradient(900px 420px at 80% 10%, rgba(246,211,107,.12), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  overflow:hidden;
}
.panel:before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, rgba(246,211,107,.10), rgba(255,43,79,.08), rgba(255,255,255,0));
  filter: blur(24px);
  opacity:.7;
  pointer-events:none;
}
.panel > *{position:relative}

.panelTitle{
  margin: 6px 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.drop{
  position:relative;
  border-radius: 18px;
  border: 1px dashed rgba(246,211,107,.38);
  background: rgba(0,0,0,.20);
  overflow:hidden;
}
.drop.drag{
  border-color: rgba(255,43,79,.70);
  box-shadow: 0 0 0 6px rgba(255,43,79,.12);
}
.file{
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
}
.dropInner{
  display:flex;
  gap:14px;
  padding: 14px 14px;
  align-items:center;
}
.dropIcon{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(246,211,107,.20), rgba(246,211,107,.06)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(246,211,107,.22);
}
.dropIcon svg{width:22px; height:22px; color: rgba(246,211,107,.9)}
.dropHeadline{font-weight:800; letter-spacing:.2px}
.dropHint{margin-top:2px; font-size:12px; color: var(--muted2)}

.previewRow{margin-top:12px;}
.previewCard{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.16);
  padding: 12px;
}
.previewLabel{
  font-size: 12px;
  color: var(--muted2);
  letter-spacing:.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.preview{
  width:100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  display:none;
  box-shadow: var(--shadow2);
  border: 1px solid rgba(255,255,255,.10);
}
.previewEmpty{
  height: 220px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.42);
  border: 1px dashed rgba(255,255,255,.18);
}

.form{display:flex; flex-direction:column; gap:12px;}
.row2{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.field{display:flex; flex-direction:column; gap:8px;}
.label{font-size: 12px; color: rgba(255,255,255,.75); letter-spacing:.12em; text-transform: uppercase;}
.input{
  border-radius: 14px;
  border: 1px solid var(--stroke);
  padding: 11px 12px;
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.input:focus{
  border-color: rgba(246,211,107,.55);
  box-shadow: 0 0 0 6px rgba(246,211,107,.10), inset 0 0 0 1px rgba(255,255,255,.03);
}
.help{font-size: 12px; color: var(--muted2)}

.actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.btn{
  position:relative;
  border: none;
  cursor:pointer;
  border-radius: 16px;
  padding: 12px 16px;
  color: #1b0d06;
  font-weight: 900;
  letter-spacing:.06em;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, var(--gold), #ffd88c 35%, #ff9a76 70%, var(--red));
  box-shadow: 0 22px 45px rgba(255,43,79,.20), 0 18px 60px rgba(246,211,107,.22);
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.btn .btnShine{
  position:absolute; inset:-2px;
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: translateX(-120%);
  opacity:.55;
  pointer-events:none;
}
.btn:hover .btnShine{
  animation: shine 1.2s ease-in-out;
}
@keyframes shine{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(120%);}
}
.btn:hover{transform: translateY(-1px); filter: saturate(1.06)}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed; filter: grayscale(.2)}

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

.note{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
}
.note summary{
  cursor:pointer;
  font-weight:800;
  color: rgba(255,255,255,.80);
}
.noteBody{margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.7;}

.resultPanel{min-height: 620px;}
.resultStage{
  position:relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  min-height: 520px;
  display:grid;
  place-items:center;
}
.resultEmpty{
  text-align:center;
  padding: 22px;
}
.resultMark{
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(246,211,107,.30);
  color: rgba(246,211,107,.88);
  font-family: ui-serif, "STZhongsong", "SimSun", serif;
  font-weight: 900;
  font-size: 44px;
  background: radial-gradient(circle at 30% 30%, rgba(246,211,107,.18), rgba(0,0,0,.10));
  box-shadow: 0 20px 60px rgba(246,211,107,.16);
}
.resultHint{color: rgba(255,255,255,.60); font-size: 13px; line-height:1.6;}
.result{
  width:100%;
  height:100%;
  object-fit: contain;
  display:none;
}

.resultActions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.btnGhost{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.84);
  text-decoration:none;
  font-weight: 800;
  letter-spacing:.03em;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.btnGhost:hover{transform: translateY(-1px); border-color: rgba(246,211,107,.38); background: rgba(0,0,0,.18)}
.btnGhost[aria-disabled="true"]{opacity:.42; pointer-events:none;}

.tiny{
  margin-top: 12px;
  color: rgba(255,255,255,.44);
  font-size: 12px;
}

.footer{
  margin: 18px auto 0;
  max-width: 980px;
  text-align:center;
  color: rgba(255,255,255,.46);
  font-size: 12px;
  letter-spacing:.02em;
}
.sep{opacity:.55; margin:0 6px}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
  .resultPanel{min-height: unset;}
}