:root {
  --bg:#f6f7f6; --card:#fff; --text:#1f2421; --text-2:#4a524d; --muted:#88908b; --border:#e1e5e2;
  --pri:#0e7c66; --pri-light:#e3f3ee; --danger:#c8423b; --danger-light:#fbeceb; --ok:#2f8a3e; --ok-light:#e8f5ea; --warn:#a86400; --warn-light:#fdf3e2;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.6 -apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif; }
a { color:var(--pri); text-decoration:none; } a:hover { text-decoration:underline; }
button, input, textarea, select { font:inherit; color:inherit; }
[hidden] { display:none !important; }
h1 { font-size:20px; margin:0 0 4px; } h2 { font-size:16px; margin:24px 0 8px; }
.muted { color:var(--muted); font-size:13px; }
.grow { flex:1; }

.top { height:52px; display:flex; align-items:center; gap:18px; padding:0 20px; background:#26302b; color:#cfd6d2; }
.top a { color:#cfd6d2; } .top .logo { color:#fff; font-weight:600; font-size:15px; }
main { max-width:1200px; margin:0 auto; padding:24px 16px 60px; }

.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:18px 20px; }
.btn { border:1px solid var(--border); background:#fff; border-radius:8px; padding:6px 14px; cursor:pointer; display:inline-block; }
.btn:hover { text-decoration:none; background:#f1f4f2; }
.btn.pri { background:var(--pri); border-color:var(--pri); color:#fff; } .btn.pri:hover { background:#0b6855; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.danger { color:var(--danger); border-color:#f1c7c4; } .btn.danger:hover { background:var(--danger-light); }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.login { max-width:360px; margin:12vh auto 0; }
.form label { display:block; margin:14px 0 4px; font-weight:600; }
.form .hint { font-weight:400; color:var(--muted); font-size:13px; margin-left:6px; }
.form input, .form textarea, .form select { width:100%; border:1px solid var(--border); border-radius:8px; padding:7px 10px; background:#fff; }
.form textarea { min-height:120px; resize:vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline:2px solid var(--pri); outline-offset:-1px; }
.form .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.form .actions { margin-top:18px; }
.err { color:var(--danger); margin-top:10px; min-height:1.6em; }

table.list { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
table.list th, table.list td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); }
table.list th { color:var(--muted); font-weight:600; font-size:13px; background:#fafbfa; }
table.list tr:last-child td { border-bottom:0; }
table.list tr.link { cursor:pointer; } table.list tr.link:hover td { background:#f7faf8; }

.tag { display:inline-block; padding:0 8px; border-radius:4px; font-size:12px; line-height:22px; white-space:nowrap; }
.tag.ok { color:var(--ok); background:var(--ok-light); }
.tag.bad { color:var(--danger); background:var(--danger-light); }
.tag.run { color:var(--warn); background:var(--warn-light); }
.tag.none { color:var(--muted); background:#eef1ef; }

.head { display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
.status { margin:0 0 16px; padding:10px 14px; border-radius:8px; background:#fff; border:1px solid var(--border); }
.status.run { border-color:#f0d6a8; background:var(--warn-light); }
.status.bad { border-color:#f1c7c4; background:var(--danger-light); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tabs button { border:0; background:none; padding:8px 14px; cursor:pointer; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.on { color:var(--pri); border-bottom-color:var(--pri); font-weight:600; }
.subtabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.subtabs button { border:1px solid var(--border); background:#fff; border-radius:16px; padding:2px 12px; cursor:pointer; font-size:13px; }
.subtabs button.on { background:var(--pri-light); border-color:var(--pri); color:var(--pri); }

.frame { width:100%; height:78vh; border:1px solid var(--border); border-radius:10px; background:#fff; display:block; }
.shots { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.shots a { display:block; background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px; font-size:12px; color:var(--text-2); }
.shots img { width:100%; display:block; border-radius:4px; margin-bottom:4px; }

.doc { background:#fff; border:1px solid var(--border); border-radius:10px; padding:20px 28px; overflow-wrap:anywhere; }
.doc h1 { font-size:20px; margin:4px 0 12px; } .doc h2 { font-size:17px; margin:24px 0 8px; } .doc h3 { font-size:15px; margin:18px 0 6px; }
.doc .tbl { overflow-x:auto; margin:10px 0; }
.doc table { border-collapse:collapse; font-size:13px; }
.doc th, .doc td { border:1px solid var(--border); padding:5px 10px; text-align:left; vertical-align:top; }
.doc th { background:#fafbfa; }
.doc code { background:#f1f3f2; padding:1px 4px; border-radius:4px; font-size:13px; }
.doc pre { background:#f6f8f7; border:1px solid var(--border); border-radius:8px; padding:10px 12px; overflow:auto; }
.doc pre code { background:none; padding:0; }
.doc blockquote { margin:10px 0; padding:4px 12px; border-left:3px solid var(--border); color:var(--text-2); }
.doc li.d1 { margin-left:1.5em; } .doc li.d2 { margin-left:3em; } .doc li.d3 { margin-left:4.5em; }
pre.code { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px 16px; overflow:auto; font-size:12.5px; line-height:1.5; }
.blocked { padding:16px; color:var(--warn); background:var(--warn-light); border-radius:8px; }

.runs .run { background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:10px; }
.runs .run summary { cursor:pointer; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.runs .run .body { margin-top:10px; }
.files { font-size:13px; } .files div { padding:2px 0; }
.imgs { font-size:13px; color:var(--muted); margin-top:4px; }

@media (max-width:720px) {
  .form .grid3 { grid-template-columns:1fr; }
  .head { flex-direction:column; }
  .doc { padding:14px 16px; }
  table.list .hide-sm { display:none; }
}
.subtabs select { border:1px solid var(--border); border-radius:16px; padding:2px 10px; font-size:13px; background:#fff; }
.mrow { margin-bottom:12px; } .mrow .actions { margin-top:10px; }
.form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.form label.inline { display:inline-flex; align-items:center; gap:6px; margin:0; font-weight:400; }
.form label.inline input { width:auto; }
.ok { color:var(--pri); } .no { color:var(--danger); }
@media (max-width:640px) { .form .grid2 { grid-template-columns:1fr; } }
