:root{
  --bg:#f4f6f9; --card:#fff; --line:#e6eaf0; --line2:#eef1f6;
  --text:#22293a; --muted:#8a94a6; --primary:#3b6cf6; --primary-dark:#2d5ae0;
  --primary-soft:#eaf0ff; --warn-bg:#fff8e6; --warn-line:#ffe1a6; --warn-text:#96712a;
  --danger:#e5484d; --ok:#1a9d5a; --radius:12px; --shadow:0 1px 3px rgba(34,41,58,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
button{font-family:inherit}
a{color:var(--primary);text-decoration:none}

/* ---------- 头部 ---------- */
.app-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.app-header-inner{max-width:1180px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#3b6cf6,#7b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.free-badge{background:linear-gradient(135deg,#e8f8ef,#eef5ff);border:1px solid #c9e6d5;color:#2e8b57;font-size:12px;border-radius:20px;padding:5px 12px;cursor:default}
.brand-txt h1{font-size:16px;letter-spacing:.3px}
.brand-txt p{font-size:12px;color:var(--muted)}
.header-spacer{flex:1}
.btn{border:none;border-radius:9px;padding:8px 16px;font-size:13.5px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-soft{background:var(--primary-soft);color:var(--primary)}
.btn-soft:hover{background:#dde7ff}
.btn-text{background:none;color:var(--primary);padding:6px 8px}
.btn-text:hover{background:var(--primary-soft)}
.btn-mini{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn[disabled],.btn-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-lg{padding:12px 34px;font-size:15px;border-radius:10px}
.pro-badge{background:linear-gradient(135deg,#f7b733,#f56a1a);color:#fff;font-size:10px;padding:1px 6px;border-radius:20px;font-weight:600}

.env-banner{background:#eef5ff;border-bottom:1px solid #dbe8ff;color:#3b5a8f;font-size:12.5px;text-align:center;padding:6px 16px}
.app-footer{padding:26px 20px 40px;text-align:center;font-size:12.5px;color:var(--muted)}
.app-footer a{color:var(--muted)}
.app-footer a:hover{color:var(--primary)}
.footer-meta-row{margin-top:6px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.footer-main-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.footer-main-row a{color:#5b667a;text-decoration:none;font-size:13px}
.footer-main-row a:hover{color:#3b6cf6}

/* ---------- 布局 ---------- */
.page-body{max-width:1180px;margin:0 auto;padding:20px}
.step-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.step-card-inactive{opacity:.55}
.step-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.step-card-inactive .step-num{background:#c8d0de}
.step-head h2{font-size:15px}
.step-head .step-meta{font-size:12.5px;color:var(--muted)}
.step-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.step-body{padding:18px}
.sec-title{font-size:13.5px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.hint{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--line2);margin:16px 0}

/* ---------- 上传 ---------- */
.dropzone{border:1.5px dashed #cfd8e6;border-radius:var(--radius);padding:44px 20px;text-align:center;cursor:pointer;background:#fbfcfe;transition:.18s}
.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:var(--primary-soft)}
.dropzone .dz-icon{font-size:38px;margin-bottom:8px}
.dropzone h3{font-size:15px;margin-bottom:6px}
.dropzone p{font-size:12.5px;color:var(--muted)}
.dropzone .hint{margin-top:8px}

/* ---------- 视频预览 ---------- */
.preview-box{background:#0f1420;border-radius:10px;overflow:hidden;position:relative}
.preview-box video{width:100%;display:block;max-height:340px;background:#000}
.preview-meta{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.preview-meta .name{color:var(--text);font-weight:600;font-size:13px}
.tag-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.tag-toggle input{accent-color:var(--primary)}

/* ---------- 表单 ---------- */
.form-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
input[type=text],input[type=number],select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13.5px;color:var(--text);background:#fff;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--primary)}
input[type=range]{accent-color:var(--primary);height:20px}
input[type=color]{border:1px solid var(--line);border-radius:8px;padding:2px;width:44px;height:32px;background:#fff}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace}
.time-input{width:96px;text-align:center}
.timeline-row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.timeline-row .dur{font-size:12.5px;color:var(--muted);padding-bottom:8px}
.range-wrap{position:relative;height:34px;margin:6px 0 2px}
.range-track{position:absolute;top:14px;left:0;right:0;height:6px;border-radius:4px;background:#e8edf5}
.range-fill{position:absolute;top:14px;height:6px;border-radius:4px;background:var(--primary)}
.range-thumb{position:absolute;top:8px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.fps-row{display:flex;align-items:center;gap:12px}
.fps-row input[type=range]{flex:1;max-width:420px}
.fps-num{width:70px}
.unit{font-size:12.5px;color:var(--muted)}
.estimate-card{background:var(--primary-soft);border:1px solid #d9e4ff;border-radius:10px;padding:12px 16px;display:inline-flex;align-items:baseline;gap:8px}
.estimate-card .lbl{font-size:12.5px;color:#5b7ba8}
.estimate-card .val{font-size:20px;font-weight:700;color:var(--primary)}
.estimate-card .u{font-size:12.5px;color:#5b7ba8}

/* ---------- 进度 ---------- */
.progress-wrap{display:none;margin-top:14px}
.progress{height:8px;background:#e8edf5;border-radius:6px;overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,#3b6cf6,#7b5cf6);transition:width .12s}
.progress-text{font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- 步骤2 ---------- */
.warn-strip{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);font-size:12.5px;padding:7px 12px;border-radius:8px;margin-bottom:14px}
.step2-tabbar{display:inline-flex;background:#eef1f6;border-radius:9px;padding:3px;margin-bottom:14px}
.step2-tabbar-item{padding:6px 18px;border-radius:7px;font-size:13.5px;color:var(--muted);cursor:pointer;user-select:none}
.step2-tabbar-item-active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.toolbar-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.toolbar-group{display:inline-flex;gap:6px;flex-wrap:wrap}
.toolbar-btn{background:#f6f8fb;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:12.5px;color:var(--text);cursor:pointer}
.toolbar-btn:hover{border-color:var(--primary);color:var(--primary)}
/* 去背景引导模式：高亮脉冲 */
@keyframes bgGuidePulse{0%,100%{box-shadow:0 0 0 0 rgba(59,108,246,.45)}50%{box-shadow:0 0 0 8px rgba(59,108,246,0)}}
.bg-guide-hl{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;animation:bgGuidePulse 1.6s ease-in-out infinite;font-weight:600}
.toolbar-btn-on{background:var(--primary);border-color:var(--primary);color:#fff}
.toolbar-link{color:var(--primary);font-size:12.5px;cursor:pointer}
.threshold-wrap{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.threshold-wrap input[type=range]{width:150px}
.thumb-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.thumb-head .seg{display:inline-flex;background:#eef1f6;border-radius:8px;padding:3px}
.thumb-head .seg span{padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12.5px}
.thumb-head .seg span.on{background:#fff;color:var(--text);font-weight:600}
.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:460px;overflow-y:auto;padding:4px;background:#fafbfd;border:1px solid var(--line2);border-radius:10px}
.thumbnail-cell{position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;cursor:pointer;transition:.12s}
.thumbnail-cell:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.thumbnail-cell.in-set{border-color:var(--primary);border-width:2px}
.thumbnail-cell.current{outline:2px solid #f5a524;outline-offset:-2px}
.thumbnail-cell img{width:100%;display:block;aspect-ratio:1;object-fit:contain;background:#0f1420}
.thumbnail-cell .cap{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:3px 6px;color:var(--muted);background:#fff}
.thumbnail-cell .pin{position:absolute;top:4px;left:4px;background:rgba(59,108,246,.92);color:#fff;font-size:10px;padding:1px 6px;border-radius:5px;display:none}
.thumbnail-cell.in-set .pin{display:block}
.thumbnail-cell .edit-btn{position:absolute;top:4px;right:4px;background:rgba(255,255,255,.92);border:none;border-radius:6px;width:24px;height:22px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumbnail-cell .tag{position:absolute;bottom:22px;left:4px;background:rgba(245,165,36,.95);color:#fff;font-size:10px;padding:1px 6px;border-radius:5px}
.thumbnail-cell-add{display:flex;align-items:center;justify-content:center;min-height:120px;border:1.5px dashed #cfd8e6;border-radius:9px;color:var(--muted);font-size:24px;cursor:pointer;background:#fff}
.thumbnail-cell-add:hover{border-color:var(--primary);color:var(--primary)}
.anim-preview{margin-top:16px;padding:14px;background:#fafbfd;border:1px solid var(--line2);border-radius:10px}
.anim-preview .player{background:#0f1420;border-radius:9px;display:flex;align-items:center;justify-content:center;min-height:200px;overflow:hidden}
.anim-preview .player canvas{max-width:100%;max-height:280px;display:block}
.anim-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)}

/* ---------- 步骤3 ---------- */
.export-grid{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.export-main{flex:1;min-width:340px}
.export-side{width:300px;flex-shrink:0}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.resolution-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 13px;font-size:12.5px;cursor:pointer;color:var(--text);position:relative}
.resolution-chip:hover{border-color:var(--primary);color:var(--primary)}
.resolution-chip-active{background:var(--primary);border-color:var(--primary);color:#fff}
.resolution-chip-active:hover{color:#fff}
.resolution-chip.pro::after{content:"PRO";position:absolute;top:-7px;right:-4px;background:linear-gradient(135deg,#f7b733,#f56a1a);color:#fff;font-size:9px;padding:0 5px;border-radius:8px;font-weight:600}
.settings-box{background:#fafbfd;border:1px solid var(--line2);border-radius:10px;padding:14px;margin-top:12px}
.settings-box h4{font-size:13px;margin-bottom:10px}
.setting-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.seg{display:inline-flex;background:#eef1f6;border-radius:8px;padding:3px}
.seg span{padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--muted)}
.seg span.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.q-hint{color:#a8b1c1;font-size:11px;border:1px solid #dfe4ec;border-radius:50%;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;cursor:help}
.tip{background:#f4f8ff;border:1px solid #dbe8ff;color:#4a6a9c;font-size:12px;border-radius:8px;padding:8px 10px;margin-top:8px}
.tip-inline{color:#8a94a6;font-size:12px}
.status-line{margin-top:12px;font-size:13px;min-height:20px}
.status-ok{color:var(--ok)}
.status-err{color:var(--danger)}

/* ---------- 编辑器 ---------- */
.editor-mask{position:fixed;inset:0;background:#eef1f6;z-index:200;display:none;flex-direction:column}
.editor-mask.open{display:flex}
.editor-top{background:#fff;border-bottom:1px solid var(--line);padding:8px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.editor-title{font-size:13.5px;font-weight:600}
.tool-buttons{display:flex;gap:6px;flex-wrap:wrap}
.tool-btn{background:#f6f8fb;border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--text);position:relative}
.tool-btn:hover{border-color:var(--primary);color:var(--primary)}
.tool-active{background:var(--primary);border-color:var(--primary);color:#fff}
.tool-active:hover{color:#fff}
.tool-btn .pro-tag{position:absolute;top:-7px;right:-6px;background:linear-gradient(135deg,#f7b733,#f56a1a);color:#fff;font-size:9px;padding:0 5px;border-radius:8px;font-weight:600}
.editor-opts{background:#fff;border-bottom:1px solid var(--line);padding:8px 14px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
.editor-canvas-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px;background:
  linear-gradient(45deg,#f0f3f8 25%,transparent 25%,transparent 75%,#f0f3f8 75%),
  linear-gradient(45deg,#f0f3f8 25%,transparent 25%,transparent 75%,#f0f3f8 75%) 8px 8px;
  background-size:16px 16px;background-color:#fafbfd}
.editor-canvas-wrap canvas{background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.13);cursor:crosshair;image-rendering:pixelated}
.editor-bottom{background:#fff;border-top:1px solid var(--line);padding:8px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.adjust-panel{position:absolute;top:96px;right:20px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12);padding:14px;width:260px;display:none;z-index:10}
.adjust-panel.open{display:block}
.adjust-panel .line{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12.5px;color:var(--muted)}
.adjust-panel .line input[type=range]{flex:1}

/* ---------- 弹窗/提示 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(20,26,38,.42);z-index:300;display:none;align-items:center;justify-content:center}
.modal-mask.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:20px;min-width:320px;max-width:520px;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal h3{font-size:15px;margin-bottom:12px}
.modal .modal-body{font-size:13px;color:#4a5566}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
kbd{background:#f2f5f9;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-size:12px;font-family:inherit}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:38px;background:rgba(34,41,58,.94);color:#fff;font-size:13px;padding:9px 18px;border-radius:9px;z-index:400;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1}