* {margin:0;padding:0;box-sizing:border-box;} body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#f5f5f5; padding:20px; color:#222; } .box { max-width:760px; margin:0 auto; background:#fff; border-radius:12px; padding:28px; box-shadow:0 2px 12px rgba(0,0,0,.08); } h2 { font-size:20px; margin-bottom:6px; font-weight:700; } .desc { font-size:13px; color:#999; margin-bottom:20px; line-height:1.6; } /* 顶部获取 Chat ID 区域 */ .get-id { background:#fafafa; border:1px solid #eee; border-radius:10px; padding:18px 20px; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; } .get-id p { font-size:14px; color:#555; line-height:1.6; } .get-id p b {color:#222;} .get-id a { display:inline-block; padding:10px 20px; background:#222; color:#fff; border-radius:8px; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; } .get-id a:hover {opacity:.85;} label { display:block; font-size:13px; color:#666; margin:14px 0 4px; } input,textarea { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; background:#fafafa; outline:none; font-family: inherit; } input:focus,textarea:focus {border-color:#aaa;} .row { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; } button { padding:10px 16px; border:none; border-radius:8px; background:#222; color:#fff; font-size:14px; cursor:pointer; font-weight:600; } button:hover {opacity:.85;} button.secondary { background:#fff; color:#333; border:1px solid #ddd; } button.secondary:hover {background:#f0f0f0;} .section { margin-top:28px; border-top:1px solid #eee; padding-top:20px; } .section h3 { font-size:16px; margin-bottom:4px; font-weight:600; } .section .hint { font-size:12px; color:#999; margin-bottom:10px; } .tag { display:inline-block; font-size:11px; background:#f0f0f0; color:#666; padding:2px 8px; border-radius:4px; margin-left:8px; font-weight:400; } /* 代码块区域 */ .code-area { margin-top:10px; display:none; } .code-area.show {display:block;} .code-header { display:flex; justify-content:space-between; align-items:center; background:#1e1e1e; border-radius:8px 8px 0 0; padding:8px 14px; } .code-header span { font-size:12px; color:#999; } .code-header button { padding:4px 12px; font-size:12px; background:#333; border-radius:6px; } .code-header button:hover {background:#444;} .code-area pre { margin:0; border-radius:0 0 8px 8px; border:1px solid #333; border-top:none; padding:14px; background:#1e1e1e; font-size:13px; overflow-x:auto; } .code-area pre code { font-family:"Courier New",monospace; line-height:1.7; } /* 结果区域 */ .result-area { margin-top:10px; } .result-area pre { padding:14px; background:#f8f8f8; border:1px solid #eee; border-radius:8px; font-size:12px; word-break:break-all; white-space:pre-wrap; line-height:1.7; overflow-x:auto; } input[type=file] {padding:6px;}