* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
       "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
       margin: 0; background: #f5f7fa; color: #1f2933;}
header { display:flex; justify-content:space-between; align-items:center;
         padding:12px 20px; background:#1f2933; color:#fff; }
header h1 { margin:0; font-size:18px; font-weight:500; }
header h1 a { color:#fff; text-decoration:none; }
header a { color:#9bb1c5; text-decoration:none; margin-left:8px; }
main { max-width: 1100px; margin: 24px auto; padding: 0 20px; }

.upload-card { background:#fff; padding:20px; border-radius:8px;
               margin-bottom:24px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.upload-card h2 { margin: 0 0 12px; font-size:15px; }
.upload-card form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.upload-card input[type=file] { flex: 1 1 50%; }
.upload-card select, .upload-card button {
  padding:8px 12px; border:1px solid #cbd2d9; border-radius:4px; background:#fff;
  font-size:14px; cursor:pointer;
}
.upload-card button { background:#1f6feb; color:#fff; border-color:#1f6feb; }
.upload-card button:hover { background:#1858bd; }

.tasks { background:#fff; padding:20px; border-radius:8px;
         box-shadow:0 1px 3px rgba(0,0,0,.06); }
.tasks h2 { margin:0 0 12px; font-size:15px; }
.tasks table { width:100%; border-collapse:collapse; font-size:14px; }
.tasks th, .tasks td { padding:8px; text-align:left; border-bottom:1px solid #eef2f7; }
.tasks th { background:#f1f5f9; font-weight:500; color:#52606d; }

.badge { display:inline-block; padding:2px 8px; border-radius:10px;
         font-size:12px; background:#e4e7eb; color:#3e4c59; }
.status-uploaded .badge, .status-queued .badge { background:#fff5d4; color:#8a6d20; }
.status-processing .badge { background:#dbeafe; color:#1e40af; }
.status-agent_chat .badge { background:#dcfce7; color:#166534; }
.status-ready_review .badge { background:#fef3c7; color:#a16207; }
.status-forwarded .badge { background:#e9d5ff; color:#6b21a8; }
.status-failed .badge { background:#fee2e2; color:#991b1b; }

.task-view { display:grid; grid-template-columns: 240px 1fr; gap:20px; }
.meta { background:#fff; padding:16px; border-radius:8px; height:fit-content;
        box-shadow:0 1px 3px rgba(0,0,0,.06); font-size:13px; }
.meta div { margin-bottom:8px; }
.task-main { display:flex; flex-direction:column; gap:16px; }
.meta .actions { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.status-cancelled .badge { background:#e4e7eb; color:#52606d; }

.stepper { list-style:none; display:flex; padding:14px 16px; margin:0;
           background:#fff; border-radius:8px; gap:8px;
           box-shadow:0 1px 3px rgba(0,0,0,.06);
           overflow-x:auto; }
.stepper li { flex:1; min-width:90px; padding:10px 12px; border-radius:6px;
              background:#eef2f7; color:#7b8794; font-size:13px;
              text-align:center; transition:.25s; position:relative; }
.stepper li.done { background:#dcfce7; color:#166534; }
.stepper li.done::after { content:"✓"; position:absolute; top:6px; right:8px;
                          font-size:11px; font-weight:bold; }
.stepper li.active { background:#dbeafe; color:#1e40af; font-weight:500;
                     box-shadow:inset 0 0 0 2px #3b82f6;
                     animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:.65; } }
.stepper.failed li:not(.done) { background:#fee2e2; color:#991b1b; }

.preview { background:#fff; padding:16px; border-radius:8px;
           box-shadow:0 1px 3px rgba(0,0,0,.06); }
.preview h3 { margin:0 0 12px; font-size:14px; }
.preview video { width:100%; max-height:480px; background:#000;
                 border-radius:6px; }
.preview .shots { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
                  margin-top:12px; }
.preview .shots img { width:100%; height:auto; border-radius:4px;
                      cursor:zoom-in; }
.preview .caption { margin-top:12px; padding:10px; background:#f9fafb;
                    border-radius:6px; }
.preview .caption summary { cursor:pointer; font-size:13px; color:#52606d;
                            font-weight:500; }
.preview .caption pre { margin:8px 0 0; white-space:pre-wrap;
                        font-family:inherit; font-size:14px; line-height:1.6; }

.chat { background:#fff; padding:16px; border-radius:8px;
        box-shadow:0 1px 3px rgba(0,0,0,.06); min-height:400px;}
.msg { margin-bottom:14px; padding:10px 12px; border-radius:6px;
       border-left:3px solid #cbd2d9; background:#f9fafb; }
.msg .who { font-size:11px; color:#7b8794; text-transform:uppercase;
            margin-bottom:4px; letter-spacing:.04em; }
.msg pre { margin:0; white-space:pre-wrap; font-family:inherit; font-size:14px;
           line-height:1.5; }
.agent-system { border-left-color:#9aa5b1; background:#fafbfc; }
.agent-writer { border-left-color:#1f6feb; background:#eef5ff; }
.agent-reviewer { border-left-color:#22c55e; background:#ecfdf5; }

.err { color:#b91c1c; padding:8px; background:#fee2e2; border-radius:4px;
       margin-top:8px; font-size:13px; }

.login { max-width:340px; margin:80px auto; padding:24px;
         background:#fff; border-radius:8px;
         box-shadow:0 2px 8px rgba(0,0,0,.08); }
.login h1 { font-size:18px; text-align:center; margin:0 0 20px; }
.login form { display:flex; flex-direction:column; gap:10px; }
.login input { padding:10px; font-size:14px; border:1px solid #cbd2d9;
               border-radius:4px; }
.login button { padding:10px; background:#1f6feb; color:#fff; border:0;
                border-radius:4px; font-size:14px; cursor:pointer; }

.ok { color:#166534; padding:8px; background:#dcfce7; border-radius:4px;
      margin-top:8px; font-size:13px; }

.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px;
              max-width:600px; margin:24px auto; }
.admin-card { display:block; background:#fff; padding:24px; border-radius:8px;
              text-decoration:none; color:#1f2933;
              box-shadow:0 1px 3px rgba(0,0,0,.06); }
.admin-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.10); }
.admin-card h2 { margin:0 0 8px; font-size:16px; }
.admin-card p { margin:0; color:#7b8794; font-size:13px; }

button.danger { padding:4px 10px; background:#ef4444; color:#fff; border:0;
                border-radius:4px; font-size:12px; cursor:pointer; }
button.danger:hover { background:#dc2626; }
.hint { color:#7b8794; font-size:12px; margin-top:8px; }

#upload-progress { margin-top: 12px; }
.progress-bar { width:100%; height:14px; background:#e4e7eb; border-radius:7px;
                overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#1f6feb,#3b82f6);
                 width:0%; transition: width .15s linear; }
.progress-status { margin-top:6px; font-size:12px; color:#52606d;
                   font-variant-numeric: tabular-nums; }
#upload-progress.err-state .progress-fill { background:#ef4444; }
#upload-progress.err-state .progress-status { color:#b91c1c; }