:root { --ink:#17212b; --muted:#6d7884; --line:#dce4ea; --paper:#f5f7f9; --white:#fff; --blue:#1667d9; --blue-dark:#0b4ea8; --red:#c43d4b; --amber:#a56800; --green:#1c7a4b; --shadow:0 14px 40px rgba(30,55,80,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Segoe UI","Microsoft YaHei",sans-serif; line-height:1.5; }
.topbar { min-height:86px; padding:18px max(24px,calc((100vw - 1180px)/2)); color:#fff; background:#13283d; display:flex; justify-content:space-between; align-items:center; gap:20px; }
h1,h2,h3,p { margin:0; } h1 { font-size:24px; letter-spacing:.02em; } h2 { font-size:24px; margin:5px 0 8px; } h3 { font-size:18px; display:inline-block; vertical-align:middle; }
.eyebrow { color:#76b5ff; font-size:11px; font-weight:700; letter-spacing:.15em; } .muted { color:var(--muted); font-size:13px; } .topbar .muted { color:#b8c8d9; }
.top-actions,.row-actions,.download-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .shell { max-width:1180px; margin:0 auto; padding:24px; }
.tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line); } .tab { border:0; background:transparent; color:var(--muted); padding:12px 16px; cursor:pointer; font-weight:600; } .tab.active { color:var(--blue); border-bottom:3px solid var(--blue); }
.tab-panel { display:none; } .tab-panel.active { display:block; } .hero-card,.panel { background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); } .hero-card { padding:26px 28px; display:flex; justify-content:space-between; gap:24px; margin-bottom:18px; } .hero-note { align-self:center; max-width:280px; color:var(--green); font-size:13px; }
.panel { padding:22px; margin-bottom:18px; } .section-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px; } .section-heading > div { display:flex; align-items:center; gap:10px; } .step { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:#fff; background:var(--blue); border-radius:50%; font-size:11px; font-weight:700; }
textarea,input { font:inherit; } textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:9px; padding:12px; color:var(--ink); background:#fbfcfd; outline:none; } textarea:focus,input:focus { border-color:#70a7ed; box-shadow:0 0 0 3px rgba(22,103,217,.12); } .button { border:1px solid transparent; border-radius:8px; padding:9px 14px; cursor:pointer; font-weight:700; font-size:13px; transition:.15s ease; } .button:hover { transform:translateY(-1px); } .button.primary { color:#fff; background:var(--blue); } .button.primary:hover { background:var(--blue-dark); } .button.secondary { color:#31516d; background:#fff; border-color:#bfd0df; } .file-button { display:inline-flex; } .file-button input { display:none; }
.summary { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .badge { padding:5px 10px; border-radius:999px; font-size:12px; background:#edf2f6; } .badge.good { color:var(--green); background:#e7f5ed; } .badge.warn { color:var(--amber); background:#fff3d9; } .badge.bad { color:var(--red); background:#fdebed; }
.record-card { border:1px solid var(--line); border-radius:10px; padding:15px; margin:10px 0; background:#fff; } .record-card.has-error { border-color:#e7a5ab; background:#fffafa; } .record-card.has-warning { border-color:#ecd49a; } .record-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .record-title strong { font-size:15px; } .record-number { display:inline-flex; align-items:center; justify-content:center; min-width:24px; padding:2px 6px; border-radius:5px; color:var(--blue); background:#e8f1ff; font-weight:800; } .status { font-size:12px; font-weight:700; } .status.error { color:var(--red); } .status.warning { color:var(--amber); } .status.valid { color:var(--green); }
.record-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } label { display:flex; flex-direction:column; gap:4px; color:#506171; font-size:12px; font-weight:600; } label input { width:100%; border:1px solid var(--line); border-radius:7px; padding:8px; color:var(--ink); background:#fff; } .record-grid .wide { grid-column:span 2; } .record-grid textarea { min-height:58px; padding:8px; font-size:13px; }
.raw-source { margin:0 0 12px; border:1px solid #dce6ee; border-radius:7px; background:#f7fafc; } .raw-source summary { padding:8px 10px; color:#506171; cursor:pointer; font-size:12px; font-weight:700; } .raw-source pre { margin:0; padding:0 10px 10px; color:#526879; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.55 Consolas,"Microsoft YaHei",monospace; }
.risk-selector { grid-column:span 3; min-width:0; border:1px solid var(--line); border-radius:7px; padding:8px 10px 10px; background:#fff; } .risk-selector legend { padding:0 4px; color:#506171; font-size:12px; font-weight:600; } .risk-options { display:flex; flex-wrap:wrap; gap:7px; } .risk-option { display:flex; flex-direction:row; align-items:center; gap:5px; width:auto; padding:6px 8px; border:1px solid #d7e1ea; border-radius:6px; background:#fbfcfd; cursor:pointer; font-size:12px; font-weight:500; } .risk-option:hover { border-color:#70a7ed; background:#f3f8ff; } .risk-option input[type="radio"] { width:auto; margin:0; accent-color:var(--blue); } .risk-manual-option { flex-wrap:wrap; } .risk-manual-option select { min-width:180px; border:1px solid var(--line); border-radius:5px; padding:5px; color:var(--ink); background:#fff; }
.issues { margin:11px 0 0; padding:10px 12px; border-radius:8px; font-size:12px; } .issues.error { color:#8f2733; background:#fff0f1; } .issues.warning { color:#825500; background:#fff8e7; } .issues div { margin:3px 0; }
.confirm-box { padding:13px 15px; margin:16px 0; border-radius:9px; background:#f3f7fb; color:#405568; font-size:13px; } .confirm-box.ready { background:#eaf7ef; color:#18663f; } .download-actions { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; } .error-text { color:var(--red); min-height:20px; font-size:13px; } .hidden { display:none !important; }
.locked-panel { text-align:center; padding:60px 24px; } .locked-panel p { max-width:540px; margin:0 auto 18px; } .code-editor { font-family:Consolas,"Courier New",monospace; font-size:12px; line-height:1.55; background:#101b27; color:#dcecff; border:0; } .test-result { margin-top:14px; padding:12px; border-radius:8px; background:#eef5fb; font-size:13px; }
.quick-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 12px; } .quick-card { border:1px solid var(--line); border-radius:10px; padding:14px; background:#fbfcfd; } .quick-card h4 { margin:0 0 10px; font-size:14px; } .quick-card table { width:100%; border-collapse:collapse; font-size:12px; } .quick-card th { text-align:left; color:var(--muted); font-weight:600; padding:5px; } .quick-card td { padding:4px; vertical-align:top; } .quick-card input,.quick-card textarea { min-width:0; padding:6px; font-size:12px; } .quick-card textarea { width:100%; font-family:Consolas,"Courier New",monospace; resize:vertical; } .quick-help { margin:0 0 8px; color:var(--muted); font-size:12px; } .quick-card .short { width:74px; } .quick-card .priority { width:64px; } .quick-actions { margin-bottom:14px; }
dialog { border:0; border-radius:14px; padding:0; width:min(420px,calc(100vw - 32px)); box-shadow:0 20px 80px rgba(0,0,0,.25); } dialog::backdrop { background:rgba(10,25,40,.55); } .login-form { padding:28px; position:relative; display:flex; flex-direction:column; gap:12px; } .login-form h2 { margin-top:0; } .dialog-close { position:absolute; right:13px; top:9px; border:0; background:transparent; color:var(--muted); font-size:24px; cursor:pointer; }
@media (max-width:760px) { .topbar,.hero-card { align-items:flex-start; flex-direction:column; } .shell { padding:14px; } .record-grid,.quick-editor { grid-template-columns:1fr; } .record-grid .wide,.risk-selector { grid-column:span 1; } .top-actions { width:100%; justify-content:flex-start; } }