:root {
  --ink: #17231f;
  --muted: #697872;
  --line: #dfe8e4;
  --surface: rgba(255,255,255,.92);
  --green: #0e8f68;
  --green-dark: #087353;
  --green-soft: #e6f6f0;
  --orange: #ff6b35;
  --red: #ef4e5d;
  --shadow: 0 24px 70px rgba(24,65,52,.10), 0 4px 14px rgba(24,65,52,.05);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f3f8f5; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  background: linear-gradient(145deg,#f8fbf9 0%,#eff7f3 45%,#f7f4ed 100%);
  overflow-x: hidden;
}
button, textarea, select, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ambient { position: fixed; border-radius: 999px; filter: blur(4px); pointer-events:none; opacity:.48; }
.ambient-one { width: 390px; height:390px; top:-170px; left:-110px; background:radial-gradient(circle,#bfeedd,transparent 68%); }
.ambient-two { width: 470px; height:470px; right:-220px; top:160px; background:radial-gradient(circle,#ffe1c4,transparent 68%); }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; max-width:1080px; padding:0 28px; margin:auto; position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-mark { width:39px; height:39px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#11a97b,#087052); border-radius:12px; box-shadow:0 8px 18px rgba(14,143,104,.25); }
.brand-mark svg { width:24px; }
.brand span:last-child { display:flex; flex-direction:column; line-height:1.15; }
.brand strong { font-size:18px; letter-spacing:.04em; }
.brand small { font-size:11px; color:var(--muted); margin-top:4px; }
.health { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.health span { width:8px; height:8px; border-radius:50%; background:#a6b4ae; box-shadow:0 0 0 4px rgba(166,180,174,.13); }
.health.online span { background:#19a878; box-shadow:0 0 0 4px rgba(25,168,120,.13); }
.health.error span { background:var(--red); box-shadow:0 0 0 4px rgba(239,78,93,.12); }
.mobile-notice { max-width:860px; margin:0 auto -20px; padding:10px 16px; color:#086044; background:#e3f6ef; border:1px solid #bfe4d6; border-radius:12px; text-align:center; font-size:12px; font-weight:700; position:relative; z-index:2; }
.fast-access-link { min-height:32px; margin-left:10px; padding:5px 10px; display:inline-flex; align-items:center; justify-content:center; color:white; background:#087f5b; border-radius:8px; text-decoration:none; font-weight:800; }

main { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:45px 24px 80px; }
.hero { text-align:center; margin-bottom:32px; }
.eyebrow { display:inline-flex; padding:7px 13px; border:1px solid #cce5dc; background:rgba(255,255,255,.65); border-radius:999px; color:var(--green-dark); font-size:12px; font-weight:700; letter-spacing:.08em; }
.hero h1 { margin:18px 0 10px; font-size:clamp(34px,5vw,52px); letter-spacing:-.045em; line-height:1.1; }
.hero p { margin:0 auto; max-width:650px; color:var(--muted); font-size:16px; line-height:1.8; }
.card { background:var(--surface); border:1px solid rgba(210,224,218,.86); box-shadow:var(--shadow); border-radius:24px; backdrop-filter:blur(18px); }
.workspace { padding:10px 30px 28px; }
.mode-tabs { display:flex; gap:4px; padding:5px; margin:0 auto 24px; background:#eef4f1; border-radius:14px; }
.mode-tab { flex:1; border:0; background:transparent; color:var(--muted); padding:11px 14px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; transition:.2s; }
.mode-tab svg { width:18px; }
.mode-tab.active { background:white; color:var(--ink); box-shadow:0 3px 10px rgba(25,55,45,.08); }
.input-panel label:first-child { display:block; margin:0 0 10px; font-size:14px; font-weight:700; }
.textarea-wrap { position:relative; }
textarea { width:100%; resize:vertical; min-height:112px; border:1.5px solid #d7e2dd; border-radius:14px; padding:16px 78px 16px 16px; color:var(--ink); outline:0; line-height:1.65; background:#fbfdfc; transition:.2s; }
textarea:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(14,143,104,.09); background:white; }
textarea::placeholder { color:#9aa7a2; }
.paste-button { position:absolute; right:10px; top:10px; border:0; color:var(--green-dark); background:var(--green-soft); padding:7px 12px; border-radius:9px; cursor:pointer; font-weight:700; font-size:13px; }
.platforms { display:flex; align-items:center; gap:8px; margin-top:11px; color:#89958f; font-size:12px; }
.platforms b { padding:4px 8px; border-radius:6px; font-weight:700; }
.platforms .douyin { color:#171c1a; background:#eef1ef; }
.platforms .rednote { color:#d83142; background:#fff0f1; }
.dropzone { min-height:150px; border:1.5px dashed #b7cbc2; background:#f7fbf9; border-radius:15px; display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; transition:.2s; }
.dropzone:hover,.dropzone.dragover { border-color:var(--green); background:var(--green-soft); }
.dropzone input { display:none; }
.dropzone strong { font-size:14px; }
.dropzone small { color:var(--muted); }
.upload-icon { width:38px; height:38px; display:grid; place-items:center; background:white; border:1px solid var(--line); color:var(--green); border-radius:11px; }
.upload-icon svg { width:21px; }
.divider { display:flex; align-items:center; gap:14px; margin:24px 0 16px; color:#87938e; font-size:12px; font-weight:700; }
.divider::before,.divider::after { content:""; height:1px; background:var(--line); flex:1; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.option { min-height:72px; display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); background:#fbfcfc; border-radius:13px; cursor:pointer; transition:.18s; }
.option:hover { border-color:#b9d5ca; transform:translateY(-1px); }
.option.selected { border-color:#a9d8c7; background:#f2fbf7; }
.option input { position:absolute; opacity:0; pointer-events:none; }
.check { width:21px; height:21px; flex:0 0 21px; border:1.5px solid #b7c4bf; border-radius:7px; position:relative; background:white; }
.option.selected .check { background:var(--green); border-color:var(--green); }
.option.selected .check::after { content:""; position:absolute; width:8px; height:4px; border-left:2px solid white; border-bottom:2px solid white; transform:rotate(-45deg); left:5px; top:6px; }
.option-copy { display:flex; flex-direction:column; gap:4px; }
.option-copy strong { font-size:13px; }
.option-copy small { color:var(--muted); font-size:11px; line-height:1.4; }
.advanced { margin-top:13px; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.advanced summary { list-style:none; padding:13px 15px; cursor:pointer; font-size:13px; font-weight:700; display:flex; justify-content:space-between; }
.advanced summary::-webkit-details-marker { display:none; }
.advanced summary span { color:#98a49f; font-weight:400; font-size:11px; }
.advanced[open] summary { border-bottom:1px solid var(--line); }
.advanced-body { padding:15px; display:grid; grid-template-columns:1fr 1fr; gap:13px; background:#fbfcfc; }
.field { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; }
.field select { border:1px solid #d8e2de; border-radius:9px; background:white; padding:9px 10px; color:var(--ink); outline:0; }
.toggle-row { grid-column:1/-1; display:flex; align-items:center; gap:11px; cursor:pointer; }
.toggle-row input { position:absolute; opacity:0; }
.switch { width:38px; height:22px; background:#c8d2ce; border-radius:999px; padding:3px; transition:.2s; }
.switch::after { content:""; display:block; width:16px; height:16px; background:white; border-radius:50%; box-shadow:0 1px 4px #87938e; transition:.2s; }
.toggle-row input:checked + .switch { background:var(--green); }
.toggle-row input:checked + .switch::after { transform:translateX(16px); }
.toggle-row > span:last-child { display:flex; flex-direction:column; gap:2px; }
.toggle-row strong { font-size:12px; }
.toggle-row small { font-size:10px; color:var(--muted); }
.action-row { display:flex; align-items:center; justify-content:space-between; margin-top:21px; gap:16px; }
.privacy-note { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.privacy-note svg { width:18px; color:var(--green); }
.primary-button { min-width:202px; border:0; padding:14px 18px; color:white; background:linear-gradient(135deg,#10a578,#087353); border-radius:12px; box-shadow:0 10px 22px rgba(14,143,104,.22); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; font-weight:800; transition:.2s; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 13px 28px rgba(14,143,104,.28); }
.primary-button:disabled { opacity:.58; cursor:not-allowed; transform:none; }
.primary-button svg { width:18px; }
.rights-note { text-align:right; margin:9px 3px 0; color:#9aa6a1; font-size:10px; }

.current { margin-top:22px; padding:23px 26px; }
.section-head { display:flex; align-items:center; justify-content:space-between; }
.section-head > div { display:flex; align-items:center; gap:10px; }
.section-head h2 { margin:0; font-size:17px; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(14,143,104,.1); animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(14,143,104,0); } }
.status-pill { padding:6px 10px; border-radius:999px; background:var(--green-soft); color:var(--green-dark); font-size:11px; font-weight:700; }
.progress-track { height:8px; background:#e9efec; overflow:hidden; border-radius:999px; margin:20px 0 8px; }
.progress-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,#11a779,#45c99f); border-radius:inherit; transition:width .45s ease; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.progress-meta strong { color:#596a63; font-weight:600; }
.stage-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:17px; }
.stage { padding:9px 8px; border-radius:9px; background:#f3f6f5; color:#8d9994; font-size:10px; text-align:center; }
.stage.done { color:var(--green-dark); background:var(--green-soft); }
.stage.active { color:white; background:var(--green); }
.result-panel { display:flex; align-items:center; gap:12px; margin-top:17px; padding:13px; background:#f0faf6; border:1px solid #c8e6da; border-radius:12px; }
.result-icon { width:36px; height:36px; border-radius:50%; background:var(--green); color:white; display:grid; place-items:center; }
.result-icon svg { width:20px; stroke-width:2.4; }
.result-panel > div:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:3px; }
.result-panel strong { font-size:13px; }
.result-panel small { color:var(--muted); font-size:10px; }
.download-button { color:white; background:var(--green); text-decoration:none; font-size:11px; font-weight:700; padding:9px 13px; border-radius:8px; }
.result-files { margin-top:14px; }
.download-group { padding:14px; border:1px solid var(--line); background:#fbfdfc; border-radius:13px; }
.download-group + .download-group { margin-top:10px; }
.download-group h3 { margin:0 0 9px; color:#53635d; font-size:12px; }
.download-file-list { display:flex; flex-direction:column; gap:8px; }
.file-download-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:58px; padding:8px 9px; background:white; border:1px solid #e3ebe7; border-radius:11px; }
.file-kind { width:36px; height:36px; display:grid; place-items:center; color:var(--green-dark); background:var(--green-soft); border-radius:10px; font-size:12px; font-weight:900; }
.file-kind.video { color:#345fa8; background:#eaf1ff; }
.file-kind.image { color:#a05420; background:#fff1e6; }
.file-kind.copy { color:#7a4a9b; background:#f4eafa; }
.file-kind.original { color:#63706b; background:#eef2f0; }
.file-download-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.file-download-copy strong { font-size:13px; }
.file-download-copy small { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.file-download-button { min-width:82px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; color:white; background:var(--green); border-radius:9px; text-decoration:none; font-size:12px; font-weight:800; }
.downloads-loading,.downloads-empty { padding:18px 12px; color:var(--muted); background:#f6f9f7; border:1px dashed #cbd8d2; border-radius:11px; text-align:center; font-size:12px; }
.warning-panel { margin-top:12px; padding:11px 13px; border-radius:10px; background:#fff8e9; color:#8a6321; font-size:11px; line-height:1.6; border:1px solid #f1dfb8; }

.history-section { margin-top:38px; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:13px; padding:0 4px; }
.section-title h2 { margin:0; font-size:18px; }
.section-title p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.text-button { border:0; background:transparent; color:var(--green-dark); cursor:pointer; font-weight:700; font-size:12px; }
.history-list { display:flex; flex-direction:column; gap:9px; }
.history-item { background:rgba(255,255,255,.73); border:1px solid var(--line); border-radius:14px; padding:13px 15px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.history-thumb { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#eaf5f0; color:var(--green); font-weight:900; font-size:12px; }
.history-copy { min-width:0; flex:1; }
.history-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.history-copy small { color:var(--muted); font-size:10px; }
.history-status { font-size:10px; padding:5px 8px; border-radius:999px; background:#eef2f0; color:var(--muted); }
.history-status.completed { color:var(--green-dark); background:var(--green-soft); }
.history-status.failed { color:#b43b48; background:#fff0f2; }
.history-action { border:0; color:var(--green-dark); background:var(--green-soft); border-radius:8px; text-decoration:none; font-size:11px; font-weight:700; cursor:pointer; }
.history-action:disabled { opacity:.6; cursor:wait; }
.history-downloads { flex:0 0 100%; min-width:0; padding-top:3px; }
.empty-state { min-height:130px; border:1px dashed #cad7d1; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#98a59f; gap:4px; }
.empty-state span { font-size:24px; color:#b2c0ba; }
.empty-state strong { font-size:12px; }
.empty-state small { font-size:10px; }
footer { text-align:center; color:#8b9892; font-size:10px; padding:0 20px 28px; }
.toast { position:fixed; z-index:20; left:50%; bottom:28px; transform:translate(-50%,20px); background:#182620; color:white; padding:11px 16px; border-radius:10px; font-size:12px; box-shadow:0 10px 35px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#a93442; }
.hidden { display:none!important; }

@media(max-width:680px) {
  .topbar { height:64px; padding:0 17px; }
  .health { font-size:0; }
  main { padding:28px 13px 60px; }
  .hero { margin-bottom:22px; }
  .hero h1 { font-size:34px; }
  .hero p { font-size:14px; padding:0 8px; }
  .workspace { padding:8px 16px 20px; border-radius:19px; }
  .option-grid { grid-template-columns:1fr; }
  .advanced-body { grid-template-columns:1fr; }
  .action-row { flex-direction:column-reverse; align-items:stretch; }
  .primary-button { width:100%; }
  .privacy-note { justify-content:center; }
  .rights-note { text-align:center; }
  .stage-list { grid-template-columns:1fr 1fr; }
  .current { padding:18px 16px; }
  .mobile-notice { margin:8px 13px -12px; }
  .fast-access-link { min-height:44px; margin:8px 0 0; }
  .paste-button,.history-action,.text-button,.download-button,.file-download-button { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .paste-button { top:8px; right:8px; }
  .field select { min-height:44px; font-size:16px; }
  .result-panel { flex-wrap:wrap; }
  .result-panel > div:nth-child(2) { min-width:0; }
  .result-panel .download-button { width:100%; }
  .download-group { padding:11px; }
  .file-download-row { grid-template-columns:36px minmax(0,1fr) auto; gap:8px; padding:8px; }
  .file-download-button { min-width:80px; padding:8px 10px; }
  .history-action { min-width:82px; }
  .toast { width:calc(100vw - 32px); max-width:520px; bottom:max(20px, env(safe-area-inset-bottom)); overflow-wrap:anywhere; text-align:center; }
}