* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --navy:#0e2a47; --navy2:#12365c; --blue:#1d6ae5; --blue2:#3b82f6;
  --bg:#f4f6f9; --card:#fff; --line:#e5e9f0; --tx:#1f2937; --tx2:#6b7280;
  --green:#16a34a; --amber:#d97706; --red:#dc2626; --gray:#6b7280;
}
body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; background:var(--bg); color:var(--tx); font-size:14px; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
a{ text-decoration:none; color:inherit; }

/* ===== 登录页 ===== */
#login{ position:fixed; inset:0; background:var(--navy); display:flex; align-items:center; justify-content:center; z-index:50; }
.login-card{ width:380px; max-width:92vw; background:#fff; border-radius:12px; padding:36px 32px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.login-card h1{ font-size:20px; font-weight:700; margin-bottom:4px; }
.login-card .sub{ color:var(--tx2); font-size:13px; margin-bottom:24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--tx2); margin-bottom:6px; }
.field input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; outline:none; }
.field input:focus{ border-color:var(--blue); }
.btn-primary{ width:100%; padding:11px; background:var(--blue); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
.btn-primary:hover{ background:#1557c0; }
.login-tip{ margin-top:14px; font-size:12px; color:#94a3b8; text-align:center; }
.login-badge{ display:inline-block; background:#eff6ff; color:var(--blue); font-size:11px; padding:2px 8px; border-radius:10px; margin-bottom:12px; }

/* ===== 主框架 ===== */
#app{ display:flex; min-height:100vh; }
.sidebar{ width:216px; background:var(--navy); color:#cbd5e1; flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand{ padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand .logo{ font-size:16px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
.brand .logo .dot{ width:9px; height:9px; border-radius:3px; background:var(--blue2); display:inline-block; }
.brand .tag{ font-size:11px; color:#64748b; margin-top:3px; }
.nav{ padding:12px 10px; flex:1; overflow-y:auto; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#cbd5e1; font-size:14px; margin-bottom:2px; transition:background .15s; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:var(--blue); color:#fff; font-weight:600; }
.nav-item svg{ width:17px; height:17px; flex-shrink:0; }
.nav-group{ font-size:11px; color:#52627a; padding:14px 12px 6px; }
.sidebar-foot{ padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#52627a; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ height:56px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:10; }
.topbar .page-title{ font-size:16px; font-weight:700; }
.topbar .crumb{ font-size:12px; color:var(--tx2); margin-top:1px; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.user-chip{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx); }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.content{ padding:22px 24px; max-width:1280px; width:100%; margin:0 auto; }

/* ===== 通用组件 ===== */
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px; }
.card-title{ font-size:15px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.stat .num{ font-size:26px; font-weight:700; margin-top:6px; }
.stat .lbl{ font-size:13px; color:var(--tx2); }
.stat .delta{ font-size:12px; margin-top:4px; }
.muted{ color:var(--tx2); font-size:12px; }
.badge{ display:inline-block; font-size:12px; padding:2px 10px; border-radius:10px; font-weight:500; white-space:nowrap; }
.b-draft{ background:#f1f5f9; color:var(--gray); }
.b-review{ background:#eff6ff; color:var(--blue); }
.b-test{ background:#fff7ed; color:var(--amber); }
.b-pub{ background:#ecfdf5; color:var(--green); }
.b-off{ background:#fef2f2; color:var(--red); }
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:left; padding:10px 12px; color:var(--tx2); font-weight:500; border-bottom:1px solid var(--line); white-space:nowrap; background:#fafbfc; }
td{ padding:11px 12px; border-bottom:1px solid #f1f4f8; white-space:nowrap; }
tr:hover td{ background:#f8fafc; }
.btn{ display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:7px; font-size:13px; border:1px solid var(--line); background:#fff; color:var(--tx); transition:all .15s; }
.btn:hover{ border-color:var(--blue); color:var(--blue); }
.btn-sm{ padding:3px 9px; font-size:12px; }
.btn-blue{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-blue:hover{ background:#1557c0; color:#fff; }
.btn-green{ background:var(--green); border-color:var(--green); color:#fff; }
.btn-green:hover{ background:#128a3d; color:#fff; }
.btn-amber{ background:var(--amber); border-color:var(--amber); color:#fff; }
.btn-amber:hover{ background:#b45f05; color:#fff; }
.btn-red{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-red:hover{ background:#b91c1c; color:#fff; }
.btn-ghost{ border:1px solid var(--line); background:#fff; color:var(--tx2); }
.btn-ghost:hover{ border-color:var(--tx2); color:var(--tx); }
.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }

/* ===== 工具栏搜索框（统一样式：固件管理 / 审计日志 / SN 记录） ===== */
.toolbar input[type="text"], .toolbar input:not([type]), .toolbar input[type="search"]{
  width:200px; padding:7px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:13px; color:var(--tx); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.toolbar input[type="text"]::placeholder, .toolbar input:not([type])::placeholder{ color:#9aa5b1; }
.toolbar input[type="text"]:focus, .toolbar input:not([type]):focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,106,229,.12);
}

/* 仪表盘柱状（示例） */
.bars{ display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:8px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.bar{ width:60%; max-width:44px; background:var(--blue2); border-radius:4px 4px 0 0; min-height:2px; }
.bar.today{ background:var(--navy); }
.bar-col .v{ font-size:11px; color:var(--tx2); }
.bar-col .d{ font-size:11px; color:var(--tx2); }

.note{ background:#fff8f0; border:1px solid #fde6c8; color:#9a5b13; font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:14px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-item label{ display:block; font-size:13px; color:var(--tx2); margin-bottom:6px; }
.form-item input,.form-item select,.form-item textarea{ width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; outline:none; }
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{ border-color:var(--blue); }
.form-item.full{ grid-column:1/-1; }
.form-actions{ margin-top:18px; display:flex; gap:10px; justify-content:flex-end; }
.upload-box{ border:2px dashed #d7dee8; border-radius:10px; padding:26px; text-align:center; color:var(--tx2); cursor:pointer; }
.upload-box:hover{ border-color:var(--blue); color:var(--blue); }

#toast{ position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff; padding:10px 20px; border-radius:8px; font-size:13px; z-index:99; opacity:0; pointer-events:none; transition:opacity .25s; box-shadow:0 8px 24px rgba(0,0,0,.2); }
#toast.show{ opacity:1; }

/* ===== 自定义操作弹框（固件审核/测试/发布等，普通文本框） ===== */
.modal-mask{ position:fixed; inset:0; background:rgba(14,42,71,.45); display:none; align-items:center; justify-content:center; z-index:80; }
.modal-mask.show{ display:flex; }
.modal{ width:560px; max-width:94vw; max-height:86vh; background:#fff; border-radius:12px; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.3); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.modal-head span{ font-weight:700; font-size:15px; }
.modal-x{ border:none; background:none; font-size:20px; color:var(--tx2); cursor:pointer; line-height:1; padding:2px 6px; border-radius:6px; }
.modal-x:hover{ background:#f1f5f9; color:var(--tx); }
.modal-body{ padding:16px 18px; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:12px 18px; border-top:1px solid var(--line); }
.rich-editor{ width:100%; min-height:110px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; line-height:1.65; outline:none; background:#fff; resize:vertical; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.rich-editor:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,106,229,.12); }
.rich-file{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; background:#f8fafc; border:1px dashed var(--line); border-radius:8px; }
.rich-file .btn{ flex-shrink:0; }
/* 详情页富文本备注 */
.tl-note ul,.tl-note ol{ padding-left:20px; margin:4px 0; }
.tl-note blockquote{ border-left:3px solid var(--blue2); margin:4px 0; padding:1px 8px; color:var(--tx2); background:#fff; }
.tl-note a{ color:var(--blue); text-decoration:underline; }
.tl-note h2,.tl-note h3,.tl-note h4{ margin:4px 0 2px; }

@media (max-width:900px){
  .sidebar{ width:64px; }
  .brand .logo span.text,.brand .tag,.nav-item span,.nav-group,.sidebar-foot{ display:none; }
  .nav-item{ justify-content:center; }
  .grid4{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .content{ padding:14px; }
  .grid4{ grid-template-columns:1fr; }
}

/* ===== 固件详情页 ===== */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:900px){ .grid2{ grid-template-columns:1fr; } }
.kv{ width:100%; border-collapse:collapse; font-size:13px; }
.kv td{ padding:7px 8px; border-bottom:1px solid #f1f4f8; }
.kv td:first-child{ color:var(--tx2); width:110px; white-space:nowrap; }
.timeline{ padding:6px 0; }
.tl-item{ display:flex; gap:12px; position:relative; padding-bottom:18px; }
.tl-item::before{ content:''; position:absolute; left:5px; top:16px; bottom:0; width:2px; background:#e2e8f0; }
.tl-item:last-child::before{ display:none; }
.tl-dot{ width:12px; height:12px; border-radius:50%; background:var(--blue); flex:none; margin-top:4px; position:relative; z-index:1; box-shadow:0 0 0 3px #eff6ff; }
.tl-body{ flex:1; min-width:0; }
.tl-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tl-action{ font-weight:600; font-size:13px; }
.tl-meta{ color:var(--tx2); font-size:12px; }
.tl-note{ color:var(--tx2); font-size:12px; margin-top:3px; background:#f8fafc; border-radius:6px; padding:6px 9px; }

/* 固件版本号：详情入口 */
.fw-version-link{ font-family:Consolas,monospace; font-weight:600; color:var(--blue); text-decoration:none; border-bottom:1px dashed #b6cdf5; }
.fw-version-link:hover{ color:#1557c0; border-bottom-style:solid; }

/* ===== 状态筛选标签 ===== */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tab{ display:inline-flex; align-items:center; padding:7px 16px; border-radius:8px; font-size:13px; color:var(--tx2); background:#fff; border:1px solid var(--line); cursor:pointer; text-decoration:none; transition:all .15s; white-space:nowrap; }
.tab:hover{ border-color:var(--blue); color:var(--blue); }
.tab.active{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:500; }

/* 分页条 */
.pager{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap}

/* ---------- 产品开发文档正文（Markdown 渲染） ---------- */
.doc-body{ font-size:14px; line-height:1.75; color:var(--tx); word-break:break-word; }
.doc-body h1{ font-size:22px; margin:20px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.doc-body h2{ font-size:19px; margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.doc-body h3{ font-size:16px; margin:16px 0 6px; }
.doc-body h4, .doc-body h5, .doc-body h6{ font-size:14px; margin:14px 0 6px; }
.doc-body p{ margin:8px 0; }
.doc-body ul, .doc-body ol{ margin:8px 0; padding-left:26px; }
.doc-body li{ margin:4px 0; }
.doc-body table{ border-collapse:collapse; margin:12px 0; width:100%; }
.doc-body th, .doc-body td{ border:1px solid var(--line); padding:6px 10px; font-size:13px; }
.doc-body th{ background:var(--bg); font-weight:600; }
.doc-body code{ background:var(--bg); padding:2px 6px; border-radius:4px; font-family:Consolas,"Courier New",monospace; font-size:13px; }
.doc-body pre{ background:#0f172a; color:#e2e8f0; padding:12px 14px; border-radius:8px; overflow:auto; }
.doc-body pre code{ background:transparent; color:inherit; padding:0; }
.doc-body blockquote{ border-left:3px solid var(--blue); margin:10px 0; padding:6px 12px; color:var(--tx2); background:var(--bg); border-radius:0 6px 6px 0; }
.doc-body img{ max-width:100%; border-radius:6px; }
.doc-body hr{ border:none; border-top:1px solid var(--line); margin:18px 0; }
.doc-meta{ background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:13px; color:var(--tx2); margin-bottom:14px; line-height:1.8; }

/* 简问工作台：沿用现有组件，改善可读性、焦点与窄屏操作。 */
:root { --tx2:#526174; --line:#dce3ed; --green:#15803d; --navy:#142b48; }
body { line-height:1.5; }
[hidden] { display:none !important; }
button:disabled { opacity:.65; cursor:wait; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #7ab0ff; outline-offset:3px; }
input[aria-invalid="true"] { border-color:var(--red) !important; }
.skip-link { position:fixed; left:16px; top:-70px; z-index:120; padding:10px 16px; background:white; color:var(--blue); border-radius:8px; }
.skip-link:focus { top:12px; }
.brand { padding:24px 18px; }
.brand .logo { font-size:16px; line-height:1.5; }
.brand .tag { color:#b4c4da; margin-top:7px; letter-spacing:.04em; }
.nav-group, .sidebar-foot { color:#a9bbd2; }
.nav-item { min-height:42px; }
.topbar { min-height:76px; height:auto; padding:14px 28px; gap:16px; }
.page-heading { flex:1; min-width:0; }
.topbar .page-title { font-size:21px; letter-spacing:-.02em; }
.topbar .crumb { margin-top:3px; }
.content { padding:28px; }
.card, .stat { box-shadow:0 2px 5px rgba(20,43,72,.025); border-radius:12px; }
.card { padding:22px; }
.card-title { font-size:16px; gap:12px; flex-wrap:wrap; }
.stat .num { font-size:30px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.btn { min-height:36px; justify-content:center; font-weight:500; }
.btn-sm { min-height:30px; }
.form-item input, .form-item select, .form-item textarea { background:white; min-height:42px; }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { box-shadow:0 0 0 3px #e4efff; }
.form-item label, .field-label { color:#36465b; font-weight:600; font-size:13px; display:block; margin-bottom:8px; }
.toolbar { gap:12px; }
.toolbar form { flex-wrap:wrap; }
.toolbar input { min-height:38px; }
.tabs { gap:6px; }
.tab { min-height:36px; }
.table-wrap:focus-visible { outline-offset:5px; }
th { color:#475569; font-size:12px; font-weight:600; padding:13px 12px; }
td { padding:14px 12px; font-variant-numeric:tabular-nums; }
.form-feedback { margin:12px 0; padding:10px 12px; border-radius:8px; background:#eff6ff; color:#1e40af; font-size:13px; line-height:1.6; }
.form-feedback.error { background:#fff1f2; color:#9f1239; border:1px solid #fecdd3; }
.field-help { color:var(--tx2); font-size:12px; margin-top:8px; }
.empty-state { text-align:center; padding:38px 18px; color:var(--tx2); white-space:normal; }
.empty-state strong { display:block; color:var(--tx); font-size:16px; font-weight:600; margin-bottom:7px; }
.empty-state p { margin-bottom:16px; }
.setup-guide { background:#eff6ff; border-color:#c9ddfa; }
.setup-guide h2 { color:#142b48; font-size:20px; margin-bottom:6px; }
.setup-guide p { color:#475569; }
.setup-steps { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; list-style:none; }
.setup-steps a { display:block; padding:10px 14px; border:1px solid #c9ddfa; border-radius:8px; background:white; color:#1e40af; font-weight:600; }
.workflow-note { color:var(--tx2); background:transparent; border:0; padding:4px 0; line-height:1.7; }
.nav-toggle, .nav-backdrop { display:none; }
#toast { max-width:min(560px,calc(100vw - 32px)); white-space:normal; text-align:center; }
.modal-head { padding:18px 22px; }
.modal-head span { font-size:18px; }
.modal-body { padding:22px; }
.modal-foot { padding:16px 22px; }
.modal-x { min-width:36px; min-height:36px; }

.login-page #login { position:relative; min-height:100vh; padding:48px; gap:80px; background:#f1f5fa; }
.login-intro { max-width:440px; color:var(--navy); }
.login-eyebrow { font-size:13px; font-weight:600; letter-spacing:.12em; margin-bottom:20px; color:#526174; }
.login-intro h1 { font-size:36px; letter-spacing:-.035em; font-weight:700; line-height:1.3; margin-bottom:18px; }
.login-summary { color:#526174; font-size:17px; line-height:1.9; }
.login-workflow { margin-top:40px; padding-left:22px; }
.login-workflow li { padding-left:8px; margin:18px 0; color:var(--blue); }
.login-workflow strong { display:block; font-size:14px; color:var(--navy); }
.login-workflow span { font-size:13px; color:#526174; }
.login-page .login-card { width:420px; max-width:100%; flex-shrink:0; border:1px solid var(--line); border-radius:16px; padding:36px; box-shadow:0 12px 40px rgba(20,43,72,.07); }
.login-badge { font-size:12px; font-weight:600; padding:4px 10px; margin-bottom:18px; }
.login-card h2 { font-size:24px; line-height:1.4; margin-bottom:8px; }
.login-card .sub { margin-bottom:28px; font-size:14px; }
.login-card .field { margin-bottom:20px; }
.login-card .field label { font-size:14px; }
.login-card .field input { min-height:46px; font-size:15px; }
.code-row { display:flex; gap:10px; }
.code-row input { min-width:0; }
.code-row .btn { white-space:nowrap; min-width:112px; padding:8px 12px; color:#1e4da0; }
.login-card .btn-primary { min-height:46px; margin-top:6px; }
.login-tip { color:#526174; font-size:12px; line-height:1.8; margin-top:22px; }
.upload-file-button { width:100%; background:#f8fafc; font:inherit; display:block; }
.upload-file-button span { display:block; }

@media (max-width:900px) {
  .sidebar { width:244px; position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); visibility:hidden; transition:transform .18s; }
  .nav-open .sidebar { transform:translateX(0); visibility:visible; }
  .sidebar .brand .logo span.text, .sidebar .brand .tag, .sidebar .nav-item span, .sidebar .nav-group, .sidebar .sidebar-foot { display:block; }
  .sidebar .nav-item { justify-content:flex-start; min-height:46px; }
  .nav-toggle { display:inline-flex; }
  .nav-open .nav-backdrop { display:block; position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.4); border:0; }
  .topbar { padding:12px 18px; }
  .content { padding:20px 18px; }
  .login-page #login { gap:36px; padding:32px; }
  .login-intro h1 { font-size:28px; }
  .login-summary { font-size:15px; }
  .login-workflow { margin-top:24px; }
}
@media (max-width:700px) {
  .login-page #login { flex-direction:column; gap:24px; padding:28px 18px; justify-content:center; }
  .login-intro { width:420px; max-width:100%; }
  .login-eyebrow { margin-bottom:8px; }
  .login-intro h1 { font-size:26px; margin-bottom:0; }
  .login-summary, .login-workflow { display:none; }
  .login-page .login-card { padding:28px 24px; }
  .topbar .crumb { display:none; }
  .topbar .page-title { font-size:18px; }
  .topbar-right { gap:8px; }
  .user-chip > span:last-child { max-width:95px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .avatar { display:none; }
  .card { padding:16px; }
  .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat { padding:14px; }
  .stat .num { font-size:25px; }
  .form-actions { flex-wrap:wrap; }
  .form-actions .btn { flex:1; }
  .toolbar form { width:100%; }
  .toolbar form input:not([type="hidden"]) { flex:1; width:auto; min-width:140px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
.text-link { color:#1d4ed8; text-decoration:underline; text-underline-offset:3px; }