* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f1f5f9; color: #1e293b; font-size: 15px; }
#app { max-width: 640px; margin: 0 auto; min-height: 100vh; background: #f1f5f9; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #eef2f7; }
.logo { font-size: 18px; font-weight: 700; }
.back { font-size: 26px; color: #4f46e5; text-decoration: none; width: 28px; line-height: 1; }
.env { margin-left: auto; font-size: 11px; color: #94a3b8; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view { padding: 14px; }
.toast { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: rgba(0,0,0,.82); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 99; max-width: 80%; text-align: center; }
.toast.show { opacity: 1; }

/* 首页卡片 */
.cat { margin-bottom: 18px; }
.cat h3 { font-size: 14px; color: #64748b; margin: 6px 4px 10px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card { background: #fff; border-radius: 14px; padding: 18px 10px; text-align: center; text-decoration: none; color: #1e293b; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.card .ic { font-size: 28px; }
.card .nm { font-size: 12px; margin-top: 8px; }

/* 通用表单/按钮 */
.search input, .fld input { width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: 14px; outline: none; }
.search input:focus { border-color: #6366f1; }
.btn { display: block; width: 100%; border: none; border-radius: 12px; font-size: 16px; padding: 14px 0; cursor: pointer; text-align: center; text-decoration: none; }
.btn-primary { background: #4f46e5; color: #fff; margin-top: 12px; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-mini { background: #eef2ff; color: #4f46e5; border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.opts { display: flex; gap: 16px; margin: 12px 2px; font-size: 13px; color: #475569; }
.opts label { display: flex; align-items: center; gap: 4px; }
.status { color: #64748b; font-size: 13px; margin: 10px 2px; min-height: 18px; }
.result { background: #fff; border-radius: 12px; padding: 14px; margin-top: 12px; }
.res-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; }
.result pre { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; max-height: 50vh; overflow: auto; }
.list-title { font-size: 14px; color: #64748b; margin: 18px 4px 8px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.item { background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.item .name { font-size: 14px; font-weight: 600; }
.item .meta { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.empty { text-align: center; color: #94a3b8; padding: 30px 0; font-size: 13px; }

/* 统计卡 */
.stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { flex: 1 1 45%; background: #fff; border-radius: 12px; padding: 14px 16px; }
.stat .lbl { font-size: 12px; color: #64748b; }
.stat .val { font-size: 18px; font-weight: 700; margin-top: 4px; }
.stat .val.profit { color: #10b981; }

/* ===== 内容区块（复刻小程序 card/hero）===== */
.panel { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.panel-title-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.panel-link { color: #4f46e5; font-size: 13px; }
.foot-tip { font-size: 12px; color: #94a3b8; line-height: 1.6; margin: 8px 4px; }
.hero { background: linear-gradient(135deg,#6366f1,#8b5cf6); border-radius: 14px; padding: 16px; color: #fff; margin-bottom: 12px; }
.hero-header { display: flex; align-items: center; gap: 12px; }
.hero-icon { font-size: 30px; }
.hero-title { font-size: 17px; font-weight: 700; }
.hero-desc { font-size: 12px; opacity: .9; margin-top: 2px; }
.hero-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-tag { font-size: 11px; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 10px; }

/* 去水印 */
.pick-btn { background: #eef2ff; color: #4f46e5; text-align: center; padding: 14px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.presets { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.preset-btn { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.img-wrap { position: relative; margin-top: 8px; touch-action: none; user-select: none; }
.preview { width: 100%; display: block; border-radius: 8px; }
.sel-box { position: absolute; border: 2px solid #4f46e5; background: rgba(79,70,229,.15); cursor: move; box-sizing: border-box; }
.sel-handle { position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px; background: #4f46e5; border-radius: 50%; cursor: nwse-resize; border: 2px solid #fff; }
.tip { font-size: 12px; color: #94a3b8; margin: 8px 0; }
.extract-btn { background: #4f46e5; color: #fff; text-align: center; padding: 14px; border-radius: 10px; cursor: pointer; font-size: 15px; margin-top: 6px; }
.extract-btn.is-loading { opacity: .7; }
.result-img { width: 100%; border-radius: 8px; margin-bottom: 10px; }
.res-actions { display: flex; gap: 10px; }
.res-btn { flex: 1; text-align: center; background: #4f46e5; color: #fff; padding: 12px; border-radius: 10px; font-size: 14px; text-decoration: none; cursor: pointer; }
.res-btn-ghost { background: #f1f5f9; color: #475569; }

/* 提取文案 */
.link-input { width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: 14px; outline: none; min-height: 64px; resize: vertical; }
.input-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.mini-btn { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.platform-chip { margin-left: auto; font-size: 12px; color: #4f46e5; background: #eef2ff; padding: 4px 10px; border-radius: 10px; }
.platform-chip-none { color: #94a3b8; background: #f1f5f9; }
.opt-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.opt-name { font-size: 14px; font-weight: 600; }
.opt-desc { font-size: 11px; color: #94a3b8; display: block; margin-top: 2px; }
.extract-tip { display: block; font-size: 12px; color: #94a3b8; margin-top: 6px; }
.video-player { width: 100%; border-radius: 8px; background: #000; margin-top: 6px; }
.video-loading, .video-error { font-size: 13px; color: #94a3b8; padding: 10px 0; }
.bg-status, .stream-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; }
.bg-dot, .stream-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.bg-status.done .bg-dot { background: #10b981; }
.bg-status.error .bg-dot { background: #ef4444; }
.bg-extra { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.stream-body { max-height: 240px; overflow: auto; margin-top: 8px; }
.stream-seg, .seg-item { padding: 6px 0; border-bottom: 1px dashed #f1f5f9; font-size: 14px; line-height: 1.6; }
.stream-time, .seg-time { color: #94a3b8; font-size: 12px; margin-right: 8px; }
.stream-empty { font-size: 13px; color: #94a3b8; padding: 10px 0; }
.res-title { font-size: 16px; font-weight: 700; }
.res-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.res-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-sub { background: #dcfce7; color: #166534; }
.badge-asr { background: #fef3c7; color: #92400e; }
.res-meta-item { font-size: 12px; color: #64748b; }
.tab-row { display: flex; gap: 8px; margin: 12px 0 8px; }
.tab { padding: 6px 14px; border-radius: 8px; font-size: 13px; background: #f1f5f9; color: #64748b; cursor: pointer; }
.tab-active { background: #4f46e5; color: #fff; }
.text-content { font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; display: block; }
.proof-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px; margin: 10px 0; }
.proof-title { font-size: 13px; color: #166534; font-weight: 600; }
.proof-item { font-size: 12px; padding: 4px 0; color: #166534; }
.proof-cat { background: #16a34a; color: #fff; padding: 1px 6px; border-radius: 6px; margin-right: 6px; }
.proof-raw { text-decoration: line-through; opacity: .7; }
.proof-arrow { margin: 0 4px; }
.hist-item { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.hist-main { flex: 1; cursor: pointer; }
.hist-title { font-size: 14px; font-weight: 600; }
.hist-badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; margin-right: 6px; }
.hist-meta-item { font-size: 11px; color: #94a3b8; margin-right: 6px; }
.hist-err { font-size: 11px; color: #ef4444; margin-top: 4px; }
.hist-actions { display: flex; gap: 8px; }
.hist-btn { font-size: 12px; color: #4f46e5; cursor: pointer; }
.hist-del { color: #ef4444; }
.err-card { border: 1px solid #fecaca; }
.err-title { font-size: 14px; color: #ef4444; font-weight: 700; }
.err-msg { display: block; font-size: 13px; color: #b91c1c; margin-top: 6px; }
.section { margin: 16px 0; }
.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.section-title { font-size: 15px; font-weight: 700; }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 8px; margin-left: 6px; }
.tag-done { background: #dcfce7; color: #166534; }
.tag-active { background: #fef3c7; color: #92400e; }
.filter-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; margin-bottom: 8px; flex-wrap: wrap; }
.filter-row select { padding: 4px 8px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; }
.month-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; border-radius: 10px; overflow: hidden; }
.month-table th, .month-table td { padding: 7px 6px; text-align: right; border-bottom: 1px solid #f1f5f9; }
.month-table th:first-child, .month-table td:first-child { text-align: left; }
.month-table th { background: #f8fafc; color: #64748b; font-weight: 600; }
.month-table .total-row td { font-weight: 700; background: #faf5ff; color: #4c1d95; }