/* 开票知识（/#invoice-guide，app/invoice_guide.py）。颜色只用 tokens.css 的变量（UI 门禁）。
 * 荧光照销售洞察 / 原开票申请页那块的写法：黄 = 该去做，红 = 要当心。 */
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }
.ig-app { max-width: 1180px; margin: 0 auto; padding: 18px 16px 72px; }
.ig-head h1 { margin: 0 0 6px; font-size: 22px; }
.ig-head p { margin: 0; max-width: 820px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.ig-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
.ig-links a { color: var(--accent); text-decoration: none; }
.ig-links a:hover { text-decoration: underline; }
.ig-msg { margin: 14px 0; color: var(--muted); font-size: 13px; }
.ig-msg:empty { display: none; }
.ig-note { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.ig-btn { white-space: nowrap; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; line-height: 1.4; display: inline-flex; align-items: center; gap: 4px; }
.ig-btn:hover { background: var(--surface-hover); }
.ig-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.ig-btn.primary:hover { background: var(--accent-hover); }
.ig-btn.danger { color: var(--danger-fg); }
.ig-btn.small { padding: 3px 9px; font-size: 12px; }
.ig-btn:disabled { opacity: .55; cursor: default; }
.ig-copy { flex: none; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: var(--radius-full);
  padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; line-height: 1.6; }
.ig-copy:hover { border-color: var(--accent); color: var(--accent); }
.ig-copy.done { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }

/* 找一找 */
.ig-find { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.ig-find input { width: min(420px, 100%); box-sizing: border-box; height: 34px; padding: 4px 10px; border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.ig-find input:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.ig-find-msg { font-size: 12px; color: var(--muted); }

/* 块 */
.ig-block { margin: 18px 0 0; scroll-margin-top: 52px; }
.ig-block > h2, .ig-block-h h2 { margin: 0 0 8px; font-size: 17px; }
.ig-block h2 small { margin-left: 8px; font-weight: var(--fw-regular); font-size: 12px; color: var(--muted); }
.ig-block-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.ig-block-h h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.ig-lead { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--ink); }

/* 常识卡：宽屏两列（section-tabs 同一行取左边那张亮），窄屏一列 */
.ig-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); align-items: start; gap: 12px; }
.ig-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 12px 14px; font-size: 14px; line-height: 1.7;
  color: var(--ink-2); scroll-margin-top: 52px; }
.ig-card.wait { border-style: dashed; background: var(--surface-sunken); }
.ig-card.wait .ig-card-lead { color: var(--muted); }
.ig-card-h { display: flex; align-items: flex-start; gap: 8px; }
.ig-card h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.ig-card h3 small { margin-right: 6px; color: var(--muted); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.ig-card-lead { margin: 0; color: var(--ink); }
.ig-card ul, .ig-card ol { margin: 6px 0 0; padding-left: 20px; }
.ig-card li { margin: 3px 0; }
.ig-card li b { color: var(--ink); }
.ig-card.hit, .ig-err.hit, .ig-row.hit { box-shadow: 0 0 0 2px var(--accent); }

.ig-app mark { padding: 0 1px; border-radius: 2px; }
.ig-app mark.hl-do { background: linear-gradient(transparent 30%, var(--a-200) 30%); color: var(--text-primary); }
.ig-app mark.hl-bad { background: linear-gradient(transparent 30%, var(--r-200) 30%); color: var(--r-800); }
.ig-hint { border-bottom: 1px dashed var(--border-strong); cursor: help; }
.ig-rule { flex: none; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.ig-flash { margin: 0 0 6px; font-size: 12px; color: var(--success-fg); }

/* 常见错误：一条一块，左边错在哪 + 后果，右边怎么避免、例子 */
.ig-errs { display: grid; gap: 8px; }
.ig-err { display: grid; grid-template-columns: minmax(200px, 300px) 1fr auto; gap: 4px 16px; align-items: start; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); padding: 10px 14px; font-size: 14px; line-height: 1.7; scroll-margin-top: 52px; }
.ig-err-w b { color: var(--ink); }
.ig-err-w .eff { display: block; color: var(--danger-fg); font-size: 13px; }
.ig-err-w .new { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-full); background: var(--info-bg); color: var(--info-fg); font-size: 11px; }
.ig-err-a .lbl { color: var(--text-secondary); font-size: 12px; margin-right: 6px; }
.ig-err-a p { margin: 0; }
.ig-ex { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-secondary); }
.ig-ex li { margin: 2px 0; }
.ig-ex time { display: inline-block; min-width: 82px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ig-ex .none { color: var(--muted); }

/* 最近的发票问题 */
.ig-views { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.ig-views button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-full); padding: 4px 12px; font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap; color: var(--ink); }
.ig-views button.on { background: var(--accent-soft-bg); border-color: var(--accent); color: var(--accent-soft-fg); font-weight: var(--fw-semibold); }
.ig-views i { font-style: normal; color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.ig-list { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ig-list-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; }
.ig-row { display: grid; grid-template-columns: 56px 116px 92px minmax(0, 1fr) 64px 96px; gap: 10px; align-items: center; padding: 8px 12px;
  border-top: 1px solid var(--border-subtle); font-size: 13px; cursor: pointer; }
.ig-row:first-child { border-top: 0; }
.ig-row:hover { background: var(--surface-hover); }
.ig-row.on { background: var(--surface-selected); }
.ig-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-row .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.ig-row .s { color: var(--text-secondary); }
.ig-row .t { color: var(--ink); }
.ig-row .t em { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-full); background: var(--a-50); color: var(--text-secondary); font-size: 11px; }
.ig-row .go a { color: var(--accent); text-decoration: none; }
.ig-st { display: inline-block; padding: 0 8px; border-radius: var(--radius-full); font-size: 12px; line-height: 20px; white-space: nowrap; }
.ig-st.s0 { background: var(--danger-bg); color: var(--danger-fg); }
.ig-st.s1 { background: var(--warning-bg); color: var(--warning-fg); }
.ig-st.s2 { background: var(--success-bg); color: var(--success-fg); }

/* 右边详情 */
.ig-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3); z-index: 40; display: flex; flex-direction: column; }
.ig-panel-top { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.ig-panel-title { flex: 1; min-width: 0; font-size: 16px; font-weight: var(--fw-semibold); line-height: 1.5; }
.ig-panel-title small { display: block; font-weight: var(--fw-regular); color: var(--muted); font-size: 12px; margin-top: 2px; }
.ig-panel-body { flex: 1; overflow: auto; padding: 12px 14px 40px; font-size: 14px; line-height: 1.7; }
.ig-panel-body h5 { margin: 14px 0 6px; font-size: 13px; color: var(--text-secondary); }
.ig-meta { display: grid; grid-template-columns: 76px 1fr; gap: 3px 8px; font-size: 13px; }
.ig-meta > span:nth-child(odd) { color: var(--text-secondary); }
.ig-text { white-space: pre-wrap; word-break: break-word; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0; }
.ig-result { white-space: pre-wrap; word-break: break-word; background: var(--success-bg); border: 1px solid var(--success-border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0; }
.ig-common { border: 1px solid var(--a-200); background: var(--a-50); border-radius: var(--radius-sm); padding: 8px 10px; }
.ig-common p { margin: 2px 0; }
.ig-common .lbl { color: var(--text-secondary); font-size: 12px; margin-right: 6px; }
.ig-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ig-seg button { border: 0; border-right: 1px solid var(--border); background: var(--surface); padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ig-seg button:last-child { border-right: 0; }
.ig-seg button.on { background: var(--accent); color: var(--text-on-accent); }
.ig-form { display: grid; gap: 8px; margin-top: 6px; }
.ig-form label, .ig-modal-box label { display: grid; gap: 3px; font-size: 13px; color: var(--text-secondary); }
.ig-form input, .ig-form textarea, .ig-form select, .ig-modal-box input, .ig-modal-box textarea, .ig-modal-box select {
  box-sizing: border-box; width: 100%; border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; font-size: 14px;
  background: var(--surface); color: var(--ink); }
.ig-form textarea, .ig-modal-box textarea { resize: vertical; line-height: 1.6; }
.ig-form-msg { margin: 0; font-size: 12px; color: var(--danger-fg); min-height: 1em; }
.ig-form-msg.ok { color: var(--success-fg); }
.ig-form-bar { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ig-warn { margin: 0; font-size: 12px; color: var(--warning-fg); line-height: 1.6; }

/* 10-24 第二轮：问一个发票的问题、场景 / 常见问题筛选、补充、问答、案例、Lucy 的窗口（app/invoice_qa.py） */
.ig-ask { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.ig-ask-l { display: block; font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink); margin: 0 0 6px; }
.ig-ask-row { display: flex; gap: 8px; }
.ig-ask-row input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 36px; padding: 4px 10px; border: 1px solid var(--border-control);
  border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.ig-ask-row input:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.ig-ask-out:empty { display: none; }
.ig-ask-out { margin-top: 8px; }
.ig-ask-out .ig-note { margin: 6px 0; }
.ig-hits { display: grid; gap: 6px; }
.ig-hit { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; line-height: 1.6; background: var(--surface-sunken); }
.ig-hit p { margin: 2px 0 6px; color: var(--ink-2); }
.ig-hit-t { color: var(--accent); text-decoration: none; font-weight: var(--fw-semibold); }
.ig-hit-t:hover { text-decoration: underline; }
.ig-ask-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ig-kind { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: var(--radius-full); font-size: 11px; line-height: 18px; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-fg); }
.ig-kind.k1 { background: var(--info-bg); color: var(--info-fg); }
.ig-kind.k2 { background: var(--danger-bg); color: var(--danger-fg); }
.ig-kind.k3, .ig-kind.k4 { background: var(--success-bg); color: var(--success-fg); }
.ig-kind.k5 { background: var(--warning-bg); color: var(--warning-fg); }
.ig-mine { margin-top: 8px; font-size: 13px; }
.ig-mine summary { cursor: pointer; color: var(--text-secondary); }
.ig-mine summary i { font-style: normal; color: var(--muted); }
.ig-mine-item { padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.ig-mine-item .ig-result { margin-top: 4px; }
.ig-meta-line { color: var(--muted); font-size: 12px; }

.ig-filters { margin: 8px 0 0; }
.ig-pins { display: grid; gap: 6px; margin-top: 8px; }
.ig-scenes, .ig-types { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ig-scenes button, .ig-types button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-full); padding: 3px 11px;
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--ink); }
.ig-types button { font-size: 12px; padding: 2px 9px; border-style: dashed; }
.ig-scenes button.on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); font-weight: var(--fw-semibold); }
.ig-types button.on { background: var(--accent-soft-bg); border-color: var(--accent); border-style: solid; color: var(--accent-soft-fg); font-weight: var(--fw-semibold); }
.ig-scenes i, .ig-types i { font-style: normal; color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.ig-scenes button.on i { color: var(--text-on-accent); }
.ig-types-l { font-size: 12px; color: var(--text-secondary); margin-right: 2px; white-space: nowrap; }
/* 滚下去钉在顶上的那两排（section-tabs.js 的复制品）：一排场景、一排常见问题，放不下各自横着滑，别撑成好几行 */
.sq-secpin .ig-scenes, .sq-secpin .ig-types { max-width: calc(100vw - 150px); overflow-x: auto; scrollbar-width: thin; }
.sq-secpin .ig-scenes button, .sq-secpin .ig-types button { padding: 1px 8px; font-size: 12px; }

.ig-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.ig-tag { display: inline-block; padding: 0 7px; border-radius: var(--radius-full); font-size: 11px; line-height: 18px; white-space: nowrap; }
.ig-tag.sc { background: var(--info-bg); color: var(--info-fg); }
.ig-tag.ty { background: var(--a-50); color: var(--text-secondary); border: 1px dashed var(--border-strong); line-height: 16px; }
.ig-tag.none { background: var(--warning-bg); color: var(--warning-fg); }

.ig-supp { margin: 8px 0 0; padding: 6px 10px; list-style: none; border-left: 3px solid var(--success-border); background: var(--success-bg); border-radius: var(--radius-sm); }
.ig-supp li { margin: 3px 0; font-size: 13px; line-height: 1.6; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; scroll-margin-top: 52px; }
.ig-supp-by { flex: none; font-size: 11px; color: var(--success-fg); font-weight: var(--fw-semibold); white-space: nowrap; }
.ig-supp .ig-copy { margin-left: auto; padding: 0 8px; font-size: 11px; }
.ig-err-supp .ig-supp { margin-top: 4px; }
.ig-empty { margin: 4px 0; color: var(--muted); font-size: 13px; }
.ig-sub { margin: 14px 0 6px; font-size: 14px; }
.ig-qas, .ig-cases { display: grid; gap: 8px; }
.ig-qa-item, .ig-case { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 10px 14px; font-size: 14px; line-height: 1.7;
  scroll-margin-top: 52px; }
.ig-qa-item h3, .ig-case h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.ig-q-mark, .ig-a-mark { display: inline-block; width: 20px; height: 20px; margin-right: 6px; border-radius: var(--radius-full); text-align: center; line-height: 20px;
  font-size: 12px; font-weight: var(--fw-semibold); vertical-align: 1px; }
.ig-q-mark { background: var(--info-bg); color: var(--info-fg); }
.ig-a-mark { background: var(--success-bg); color: var(--success-fg); }
.ig-qa-a { margin: 2px 0 4px; color: var(--ink-2); }
.ig-case-p { margin: 4px 0; }
.ig-case-p .lbl { display: inline-block; min-width: 9em; color: var(--text-secondary); font-size: 12px; margin-right: 6px; }
.ig-qa-item.hit, .ig-case.hit, .ig-supp li.hit { box-shadow: 0 0 0 2px var(--accent); }

/* Lucy 的窗口 */
.ig-desk { display: grid; gap: 8px; }
.ig-sub-views { margin: 0; }
.ig-ditem { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.ig-ditem-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ig-ditem-h .ig-tags { margin: 0; }
.ig-ditem-row { display: flex; gap: 8px; align-items: center; }
.ig-pub-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-replies { margin: 4px 0; padding-left: 18px; }
.ig-replies li { margin: 2px 0; }
.ig-dform { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.ig-dline { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; font-size: 13px; }
.ig-dline > .lbl { flex: none; width: 5em; color: var(--text-secondary); padding-top: 3px; }
.ig-dline select { width: auto; max-width: 100%; }
.ig-chks { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 0; min-width: 0; }
.ig-chk { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 4px; font-size: 13px; color: var(--ink) !important; white-space: nowrap; cursor: pointer; }
.ig-form .ig-chk input { width: auto; margin: 0; }
.ig-src { margin: 4px 0; font-size: 12px; }
.ig-src summary { cursor: pointer; color: var(--text-secondary); }
.ig-supp-prev { display: grid; gap: 8px; margin-top: 8px; }

/* 记一条 */
.ig-modal { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.ig-modal-box { width: min(560px, 100%); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: 16px 18px; display: grid; gap: 10px; }
.ig-modal-box h3 { margin: 0; font-size: 16px; }
.ig-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ig-modal-bar { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 900px) {
  .ig-err { grid-template-columns: 1fr auto; }
  .ig-err-w { grid-column: 1; grid-row: 1; }
  .ig-err .ig-copy { grid-column: 2; grid-row: 1; justify-self: end; }
  .ig-err-a { grid-column: 1 / -1; grid-row: 2; }
  .ig-row { grid-template-columns: 50px minmax(0, 1fr) 64px; grid-template-areas: "d t st" "d s go"; row-gap: 2px; }
  .ig-row .d { grid-area: d; }
  .ig-row .t { grid-area: t; }
  .ig-row .st { grid-area: st; }
  .ig-row .s { grid-area: s; }
  .ig-row .go { grid-area: go; text-align: right; }
  .ig-row .w { display: none; }
}
@media (max-width: 640px) {
  .ig-app { padding: 12px 12px 72px; }
  .ig-cards { grid-template-columns: 1fr; }
  .ig-find input, .ig-form input, .ig-form textarea, .ig-form select, .ig-modal-box input, .ig-modal-box textarea, .ig-modal-box select { font-size: 16px; }   /* 小于 16px iPhone 一点就整页放大 */
  .ig-form-row { grid-template-columns: 1fr; }
  .ig-panel { width: 100vw; }
  .ig-ask-row input { font-size: 16px; }
  .ig-ask-row { flex-wrap: wrap; }
  .ig-ask-row .ig-btn { flex: 1 1 100%; justify-content: center; }
  .ig-scenes, .ig-types { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .ig-case-p .lbl { display: block; min-width: 0; }
  .ig-dline > .lbl { width: 100%; padding: 0; }
  .ig-chk input { width: 18px; height: 18px; }
}
@media print {
  .ig-find, .ig-copy, .ig-links, #ig-track, #ig-desk, .ig-ask, .ig-pins { display: none !important; }
}