:root { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #172a2a; background: #f6f7f5; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1320px) / 2)); border-bottom: 1px solid #dfe5e1; background: rgb(250 251 249 / 92%); }
.brand { font-size: 26px; font-weight: 850; letter-spacing: 1px; color: #123f39; }.brand span { margin-left: 7px; font-weight: 700; letter-spacing: 0; }.brand small { margin-left:10px; color:#4d8679; font-size:12px; font-weight:750; letter-spacing:0; vertical-align:middle; }.topbar-right { display:flex; align-items:center; gap:18px; color:#5b706b; font-size:14px; }.storage b { color:#277b69; }.logout { border:0; background:transparent; color:#467068; }
.workspace { width:min(1320px, calc(100% - 48px)); margin: 38px auto 80px; }.composer { padding: 28px; border:1px solid #dbe5e0; border-radius: 10px; background:#fff; box-shadow: 0 12px 34px rgb(26 58 50 / 7%); }.url-row { display:grid; grid-template-columns: 1fr 140px; gap:12px; }.url-row input { min-width:0; height:62px; padding:0 20px; border:1px solid #c8d8d2; border-radius:8px; font-size:18px; outline-color:#378c79; }.primary { border:0; border-radius:8px; color:#fff; background:#277b69; font-weight:800; }.primary:hover { background:#1f6758; }.options { display:flex; align-items:center; gap:24px; margin-top:18px; }.field-label { color:#526964; font-size:14px; font-weight:750; }.segments { display:flex; overflow:hidden; border:1px solid #cbdad5; border-radius:8px; }.segments button { min-width:86px; height:42px; border:0; border-right:1px solid #cbdad5; color:#415a54; background:#fff; }.segments button:last-child { border-right:0; }.segments button.active { color:#176756; background:#edf8f4; font-weight:800; }.quality { height:42px; min-width:130px; padding:0 12px; border:1px solid #cbdad5; border-radius:8px; color:#314943; background:#fff; }.start { height:42px; min-width:132px; margin-left:auto; }.notice { margin:14px 2px 0; color:#72847f; font-size:13px; }
.panel { margin-top:22px; border:1px solid #dbe5e0; border-radius:10px; background:#fff; overflow:hidden; }.panel-head { min-height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #e3e9e6; }.panel h2 { margin:0; font-size:20px; }.badge { display:inline-grid; min-width:24px; height:24px; place-content:center; margin-left:8px; border-radius:99px; color:#237967; background:#e8f4f0; font-size:13px; }.muted { color:#7a8c87; font-size:14px; }.job-head,.job { display:grid; grid-template-columns: minmax(260px,2fr) minmax(120px,1fr) minmax(180px,1.2fr) 84px; gap:20px; align-items:center; padding:16px 24px; }.job-head { min-height:48px; padding-top:0; padding-bottom:0; color:#748681; background:#fbfcfb; font-size:13px; }.job + .job { border-top:1px solid #e5ebe8; }.media { display:flex; align-items:center; gap:14px; min-width:0; }.thumb { width:112px; height:64px; flex:0 0 auto; display:grid; place-content:center; overflow:hidden; border-radius:6px; color:#6d817b; background:#eaf0ed; }.thumb img { width:100%; height:100%; object-fit:cover; }.title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:760; }.meta { margin-top:6px; color:#73837f; font-size:13px; }.state { color:#b56d21; font-weight:700; }.state.completed { color:#23836e; }.state.failed,.state.cancelled { color:#ad5750; }.progress { height:7px; overflow:hidden; border-radius:9px; background:#e5ece9; }.progress span { display:block; height:100%; border-radius:inherit; background:#4b9e8a; }.actions { display:flex; justify-content:flex-end; gap:8px; }.icon-action { min-width:36px; height:36px; border:1px solid #cad9d3; border-radius:7px; color:#346b5f; background:#fff; }.icon-action.danger { color:#a14e48; }.empty { padding:48px 24px; color:#71837d; text-align:center; }.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:#f2f5f2; }.login-card { width:min(420px,100%); padding:38px; border:1px solid #dbe5e0; border-radius:12px; background:#fff; box-shadow:0 22px 55px rgb(26 58 50 / 12%); }.login-card h1 { margin:0 0 8px; color:#123f39; }.login-card p { color:#6e817b; line-height:1.65; }.login-card label { display:grid; gap:7px; margin-top:17px; color:#334d47; font-size:14px; font-weight:700; }.login-card input { height:48px; padding:0 12px; border:1px solid #cbdad5; border-radius:7px; }.login-card .primary { width:100%; height:50px; margin-top:24px; }.message { min-height:20px; margin:12px 0 0; color:#b0534c; font-size:13px; }
@media (max-width:760px) { .topbar { padding:0 16px; }.topbar-right { gap:10px; }.workspace { width:min(100% - 28px,1320px); margin-top:20px; }.composer { padding:17px; }.url-row { grid-template-columns:1fr; }.url-row .primary { height:50px; }.options { flex-wrap:wrap; gap:12px; }.start { margin-left:0; }.job-head { display:none; }.job { grid-template-columns:1fr; gap:11px; padding:16px; }.job .actions { justify-content:flex-start; }.title { white-space:normal; }.thumb { width:92px; height:56px; }.storage { display:none; } }