:root{
  --bg:#0b0b12; --bg2:#12121c; --panel:#181825; --panel2:#1e1e2c;
  --border:#2a2a3d; --brand:#6d28d9; --brand2:#8b5cf6; --brand-soft:rgba(109,40,217,.15);
  --text:#e7e7ef; --muted:#9aa0b4; --accent:#22d3ee; --ok:#22c55e; --err:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button{font-family:inherit}

/* ---------- 布局：左导航 + 右工作区 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;flex-shrink:0;background:var(--sidebar,#080810);border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;padding:4px 8px 18px;color:#fff}
.brand .logo{color:var(--brand2);font-size:22px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:10px;background:transparent;border:none;color:var(--muted);font-size:14px;padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left;width:100%;transition:.15s}
.nav-item .ico{font-size:16px;width:20px;text-align:center}
.nav-item:hover{background:var(--panel);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:#c4b5fd}
.side-footer{margin-top:auto;background:linear-gradient(135deg,rgba(109,40,217,.25),rgba(34,211,238,.08));border:1px solid var(--border);border-radius:12px;padding:12px}
.pf-tt{font-size:13px;font-weight:600;color:var(--text)}
.pf-st{font-size:12px;color:var(--muted);margin-top:4px}

.workspace{flex:1;padding:24px;max-width:100%;overflow-x:hidden}
#tool{max-width:960px;margin:0 auto}

/* ---------- 头部 ---------- */
.tool-head{margin-bottom:18px}
.tool-head h1{font-size:28px;font-weight:800;background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tool-head .sub{color:var(--muted);margin-top:6px;font-size:14px}

/* ---------- 两列工作区 ---------- */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:820px){.tool-grid{grid-template-columns:1fr}}

/* ---------- 上传区 ---------- */
.drop{border:2px dashed var(--border);border-radius:14px;padding:34px 20px;text-align:center;cursor:pointer;background:var(--panel);transition:.2s}
.drop:hover,.drop.over{border-color:var(--brand2);background:var(--brand-soft)}
.drop input{display:none}
.drop-ico{font-size:30px;color:var(--brand2);margin-bottom:8px}
.drop div{font-size:16px;font-weight:600}
.drop .support{font-size:12px;color:var(--muted);margin-top:8px}

/* ---------- 视频 / 预览 ---------- */
#preview{width:100%;border-radius:12px;background:#000;margin-top:14px;display:none}

/* ---------- 框选 ---------- */
.region{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}
.region-title{font-size:14px;font-weight:600;margin-bottom:10px}
.canvas{position:relative;border-radius:10px;overflow:hidden;background:#000}
.canvas video{display:block;max-height:360px;max-width:100%;margin:0 auto}
.sel{position:absolute;border:2px solid var(--brand2);background:rgba(109,40,217,.22);cursor:move}
.sel .handle{position:absolute;width:20px;height:20px;background:#fff;border:2px solid var(--brand2);border-radius:4px}
.sel .handle:hover{background:var(--brand-soft)}
.h-nw{left:-10px;top:-10px;cursor:nwse-resize}
.h-ne{right:-10px;top:-10px;cursor:nesw-resize}
.h-sw{left:-10px;bottom:-10px;cursor:nesw-resize}
.h-se{right:-10px;bottom:-10px;cursor:nwse-resize}
.coord{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.coord label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.coord input{width:72px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:14px}
.hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6}

/* ---------- 卡片 / 方法 ---------- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}
.card-title{font-size:14px;font-weight:600;margin-bottom:12px}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.method{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;background:var(--panel2);transition:.15s}
.method b{display:block;font-size:14px}
.method small{font-size:11px;color:var(--muted);display:block;margin-top:3px}
.method:hover{border-color:var(--brand2)}
.method.selected{border-color:var(--brand2);background:var(--brand-soft);color:#e9d5ff}

/* ---------- 模型选择 ---------- */
.model-pick{margin-top:12px}
.model-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.model-pick select{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px}
.model-pick .hint{font-size:12px;color:var(--muted);margin-top:8px}

/* ---------- 按钮 ---------- */
button.primary{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-top:14px;transition:.15s}
button.primary:hover{filter:brightness(1.1)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.ghost{padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:transparent;cursor:pointer;font-size:12px;color:var(--muted)}
button.ghost:hover{color:var(--text)}

/* ---------- 进度 / 结果 ---------- */
.progress{height:8px;background:var(--border);border-radius:999px;margin-top:14px;overflow:hidden;display:none}
.progress .bar{height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));width:0;transition:.3s}
.status-txt{text-align:center;margin-top:12px;color:var(--muted);display:none;font-size:14px}
.result{margin-top:16px;display:none;text-align:center;background:var(--panel);border:1px solid rgba(34,197,94,.3);border-radius:14px;padding:18px}
.result p{color:var(--ok);font-weight:700}
.result a{display:inline-block;margin-top:12px;padding:11px 26px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border-radius:10px;font-weight:600;text-decoration:none}
.quality{margin-top:12px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--muted);line-height:1.7}
.quality .q-title{color:var(--text);font-weight:600;margin-bottom:5px}
.quality .q-item{display:flex;gap:6px;align-items:center;margin:3px 0}
.quality .q-item::before{content:'▶';color:var(--accent);font-size:9px}
.quality .q-issue{color:#d97706}

/* ---------- API 文档 ---------- */
.doc h2{font-size:22px;margin-bottom:16px}
.endpoint{margin-bottom:18px}
.endpoint .url{display:block;font-family:monospace;background:var(--panel);border:1px solid var(--border);color:#7dd3fc;padding:10px 14px;border-radius:8px;font-size:13px;word-break:break-all}
.endpoint .desc{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.6}
.endpoint code{background:var(--panel2);padding:2px 6px;border-radius:6px;font-size:12px}
.free{color:var(--ok);font-weight:600}.tier{color:#f59e0b;font-weight:600}.off{color:var(--err)}

/* ---------- 移动端：顶部导航 ---------- */
@media(max-width:820px){
  .layout{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-right:none;border-bottom:1px solid var(--border);overflow-x:auto}
  .brand{font-size:15px;padding:0 8px 0 0;white-space:nowrap}
  .brand .logo{font-size:18px}
  .nav{flex-direction:row;gap:2px;flex:1}
  .nav-item{white-space:nowrap;padding:8px 10px;font-size:13px}
  .side-footer{display:none}
  .workspace{padding:14px}
  .tool-head h1{font-size:22px}
}