/* JARO 品質案例庫 - 前台樣式
 * 版次：v0.6.1（對應 JQC_VERSION，隨外掛版本同步更新）
 *
 * 本檔案「完全比照」同仁提供的基礎版型（風扇品質問題基礎版型.html）之色票、
 * 字體、間距、圓角、陰影等視覺數值逐條搬移，元件結構（印章徽章 .stamp、
 * 橫幅 .banner、卡片 .card/.card-head/.d-num、欄位 .field-block、藥丸標籤
 * .pill、按鈕 .btn-outline/.btn-ghost/.btn-solid…）與原始 CSS 數值一致，
 * 未更動任何顏色或尺寸。class 名稱統一加上 jqc- 前綴並限定在 .jqc-app
 * 容器內生效，避免跟 WordPress 佈景主題既有的同名 class（如 .card、
 * .button、.notice）互相污染——這是唯一的必要調整，視覺呈現與原始
 * 版型完全相同。清單查詢、分頁、通知訊息等原型沒有的頁面元件，沿用同一套
 * 色票／字體／圓角語彙另行擴充，風格維持一致。
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700&family=Noto+Sans+TC:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.jqc-app{
	color-scheme: light;
	--page:#f9f9f7;
	--surface:#fcfcfb;
	--surface-2:#f2f0e9;
	--surface-3:#eae7dd;
	--text:#0b0b0b;
	--text-2:#52514e;
	--muted:#898781;
	--border:rgba(11,11,11,0.10);
	--border-strong:rgba(11,11,11,0.20);
	--accent:#2a78d6;
	--accent-ink:#184f95;
	--accent-soft:#e4eefa;
	--good:#0ca30c;
	--warning:#fab219;
	--serious:#ec835a;
	--critical:#d03b3b;
	--c-noise:#2a78d6;
	--c-vibration:#eb6834;
	--c-bearing:#1baf7a;
	--c-dimension:#eda100;
	--c-solder:#e87ba4;
	--shadow-card:0 1px 2px rgba(11,11,11,0.05), 0 10px 28px -16px rgba(11,11,11,0.16);
	--font-display:'Noto Serif TC','Songti TC',serif;
	--font-body:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
	--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

	background:var(--page);
	color:var(--text);
	font-family:var(--font-body);
	padding:24px;
	border-radius:16px;
}
@media (prefers-color-scheme: dark){
	.jqc-app:not([data-theme="light"]){
		color-scheme: dark;
		--page:#0d0d0d; --surface:#1a1a19; --surface-2:#221f1a; --surface-3:#2b2822;
		--text:#ffffff; --text-2:#c3c2b7; --muted:#918f86;
		--border:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.22);
		--accent:#3987e5; --accent-ink:#9ec5f4; --accent-soft:rgba(57,135,229,0.16);
		--good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#e66767;
		--c-noise:#3987e5; --c-vibration:#d95926; --c-bearing:#199e70; --c-dimension:#c98500; --c-solder:#d55181;
		--shadow-card:0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -16px rgba(0,0,0,0.5);
	}
}
.jqc-app[data-theme="dark"]{
	color-scheme: dark;
	--page:#0d0d0d; --surface:#1a1a19; --surface-2:#221f1a; --surface-3:#2b2822;
	--text:#ffffff; --text-2:#c3c2b7; --muted:#918f86;
	--border:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.22);
	--accent:#3987e5; --accent-ink:#9ec5f4; --accent-soft:rgba(57,135,229,0.16);
	--good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#e66767;
	--c-noise:#3987e5; --c-vibration:#d95926; --c-bearing:#199e70; --c-dimension:#c98500; --c-solder:#d55181;
	--shadow-card:0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -16px rgba(0,0,0,0.5);
}

.jqc-app *{ box-sizing:border-box; }
.jqc-app h1,.jqc-app h2,.jqc-app h3,.jqc-app h4{ font-family:var(--font-display); font-weight:700; margin:0; text-wrap:balance; }
.jqc-app p{ margin:0; }
.jqc-app button{ font:inherit; }
.jqc-app input,.jqc-app select,.jqc-app textarea{
	font-family:inherit; font-size:14px; color:var(--text); background:var(--surface);
	border:1px solid var(--border-strong); border-radius:6px; padding:7px 9px; width:100%;
}
.jqc-app input:focus-visible,.jqc-app select:focus-visible,.jqc-app textarea:focus-visible,.jqc-app button:focus-visible{
	outline:2px solid var(--accent); outline-offset:1px;
}
.jqc-app textarea{ width:100%; resize:vertical; line-height:1.6; }
.jqc-app .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.jqc-app .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.jqc-app a{ color:var(--accent-ink); }

.jqc-wrap{ max-width:980px; margin:0 auto; font-size:15px; line-height:1.65; }

/* ---------- notices（原型無此頁面元件，沿用色票另行擴充） ---------- */
.jqc-notice{ padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px; }
.jqc-notice-success{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink); }
.jqc-notice-error{ background:#fbe9e7; border:1px solid var(--critical); color:var(--critical); }
.jqc-notice a{ margin-left:8px; color:var(--accent-ink); font-weight:600; }

/* ---------- stamp badge（印章式圓形徽章，逐條比照原型 .stamp） ---------- */
.jqc-stamp{
	--sz:34px; width:var(--sz); height:var(--sz); border-radius:50%;
	border:2px solid var(--tag-color,var(--accent)); position:relative;
	display:flex; align-items:center; justify-content:center; flex:none;
	transform:rotate(-6deg); color:var(--tag-color,var(--accent));
	font-family:var(--font-display); font-weight:700;
}
.jqc-stamp::before{
	content:""; position:absolute; inset:3px;
	border:1px solid var(--tag-color,var(--accent)); border-radius:50%; opacity:.55;
}
.jqc-stamp span{ font-size:15px; line-height:1; }
.jqc-stamp.jqc-lg{ --sz:56px; }
.jqc-stamp.jqc-lg span{ font-size:24px; }

/* ---------- banner（案件標題橫幅，逐條比照原型 .banner） ---------- */
.jqc-banner{
	display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
	background:var(--surface); border:1px solid var(--border); border-radius:14px;
	padding:20px 22px; box-shadow:var(--shadow-card); margin-bottom:22px;
}
.jqc-banner-head{ display:flex; flex-direction:column; gap:2px; min-width:180px; }
.jqc-banner-title{ display:flex; align-items:center; gap:12px; }
.jqc-banner-title h2{ font-size:20px; }
.jqc-banner-en{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }
.jqc-pill-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.jqc-pill{
	display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
	padding:3px 9px 3px 7px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-2);
}
.jqc-pill .jqc-dot{ width:7px; height:7px; border-radius:50%; background:var(--dot,var(--muted)); }
.jqc-meta-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px; min-width:260px; }
.jqc-field{ display:flex; flex-direction:column; gap:4px; }
.jqc-field label{ font-size:11px; color:var(--muted); }
.jqc-field input,.jqc-field select{ width:100%; }
/* 搜尋命中提示列：說明這筆案件是哪一段內容命中關鍵字（v0.6.1） */
.jqc-hit-row td{ padding-top:0 !important; border-top:0 !important; }
.jqc-hit-row a{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; text-decoration:none; font-size:12px; line-height:1.6; color:var(--text-2); }
.jqc-hit-row a:hover .jqc-hit-text{ color:var(--text); }
.jqc-hit-label{ flex:none; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; padding:1px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--border); }
.jqc-hit-text{ flex:1; min-width:0; color:var(--muted); }
.jqc-hit-text mark{ background:var(--warning); color:#0b0b0b; padding:0 2px; border-radius:3px; font-weight:600; }

/* 缺陷分類選「＋ 新增分類…」時展開的名稱輸入欄（v0.6.0） */
.jqc-newcat-field{ margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.jqc-newcat-field input{ border-color:var(--accent); background:var(--accent-soft); }
.jqc-newcat-field .jqc-hint{ font-size:11px; color:var(--muted); line-height:1.5; }

/* ---------- D-cards（逐條比照原型 .card） ---------- */
.jqc-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-card); margin-bottom:16px; overflow:hidden; }
.jqc-card-head{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.jqc-d-num{ font-family:var(--font-mono); font-weight:600; font-size:12px; color:#fff; background:var(--accent); border-radius:6px; padding:3px 8px; flex:none; }
.jqc-card-head h3{ font-size:15px; flex:1; margin:0; }
.jqc-card-head h3 .eyebrow{ display:block; margin-top:1px; font-weight:400; }
.jqc-card-body{ padding:18px 20px; }
.jqc-card-body > .jqc-hint-line{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.jqc-add-row-btn{ border:1px solid var(--border-strong); background:var(--surface); border-radius:7px; padding:5px 11px; font-size:12px; cursor:pointer; color:var(--text); }
.jqc-add-row-btn:hover{ background:var(--surface-3); }

/* ---------- 欄位區塊（逐條比照原型 .field-block / .two-col） ---------- */
.jqc-field-block{ margin-bottom:14px; }
.jqc-field-block:last-child{ margin-bottom:0; }
.jqc-field-block label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.jqc-field-block textarea,.jqc-field-block input{ font-size:13.5px; }
.jqc-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .jqc-two-col{ grid-template-columns:1fr; } }

/* ---------- D1 團隊成員 / 附件列（原型無此元件，沿用卡片內部一致的圓角語彙擴充） ---------- */
.jqc-dyn-row{
	display:flex; gap:10px; align-items:center; margin-bottom:9px; flex-wrap:wrap;
	background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px;
}
.jqc-dyn-row input[type="text"]{ flex:1 1 180px; width:auto; }
.jqc-inline-check{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-2); white-space:nowrap; }
.jqc-inline-check input{ width:auto; }
.jqc-row-del{ border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; padding:4px 6px; border-radius:5px; }
.jqc-row-del:hover{ background:var(--surface-3); color:var(--critical); }

.jqc-hint{ font-size:11.5px; color:var(--muted); margin-top:10px; }
.jqc-plain-list{ margin:8px 0; padding-left:0; list-style:none; }
.jqc-plain-list li{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:7px 12px; margin-bottom:6px; font-size:13px; }
.jqc-plain-list a{ color:var(--accent-ink); font-weight:600; }

/* ---------- buttons（逐條比照原型 .btn/.btn-outline/.btn-ghost/.btn-solid） ---------- */
.jqc-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:9px 12px; font-size:13px; cursor:pointer; text-align:center; text-decoration:none; border:1px solid transparent; }
.jqc-btn-outline{ background:var(--surface); border:1px solid var(--border-strong); color:var(--text); }
.jqc-btn-outline:hover{ background:var(--surface-2); }
.jqc-btn-ghost{ background:transparent; border:1px dashed var(--border-strong); color:var(--text-2); }
.jqc-btn-ghost:hover{ background:var(--surface-2); }
.jqc-btn-solid{ background:var(--accent); color:#fff; border:1px solid var(--accent); font-weight:600; }
.jqc-btn-solid:hover{ filter:brightness(1.06); background:var(--accent); color:#fff; }
.jqc-btn-solid:disabled{ opacity:.6; cursor:default; }

/* ---------- 案件查詢清單／詳情（原型為單案編輯器，無清單頁，沿用同一色票／字體擴充） ---------- */
.jqc-filter-form{
	background:var(--surface); border:1px solid var(--border); border-radius:14px;
	padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow-card);
}
.jqc-filter-form .jqc-field label{ font-size:11.5px; }

.jqc-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.jqc-table{ width:100%; border-collapse:collapse; min-width:560px; background:var(--surface); }
.jqc-table thead th{ background:var(--surface-2); text-align:left; font-size:11.5px; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.jqc-table tbody td{ padding:8px 10px; border-bottom:1px solid var(--border); font-size:13.5px; }
.jqc-table tbody tr:last-child td{ border-bottom:none; }
.jqc-table tbody tr:hover{ background:var(--surface-2); }
.jqc-table a{ font-family:var(--font-mono); color:var(--accent-ink); font-weight:600; text-decoration:none; }
.jqc-table a:hover{ text-decoration:underline; }

.jqc-detail-table{ width:100%; border-collapse:collapse; margin:14px 0; }
.jqc-detail-table th,.jqc-detail-table td{ border:1px solid var(--border); padding:9px 12px; text-align:left; font-size:13.5px; }
.jqc-detail-table th{ background:var(--surface-2); width:170px; color:var(--text-2); font-weight:600; }

.jqc-pagination{ display:flex; gap:6px; margin:16px 0; }
.jqc-pagination a,.jqc-pagination span{
	display:inline-block; padding:5px 11px; border:1px solid var(--border-strong);
	border-radius:6px; text-decoration:none; font-family:var(--font-mono); font-size:12.5px; color:var(--text);
}
.jqc-page-current{ background:var(--accent); color:#fff; border-color:var(--accent); }

.jqc-summary{ white-space:pre-line; font-size:14px; line-height:1.75; }

@media (max-width:900px){
	.jqc-meta-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
	.jqc-app{ padding:14px; }
	.jqc-meta-grid{ grid-template-columns:1fr; }
	.jqc-banner{ flex-direction:column; }
}

@media print{
	.jqc-add-row-btn,.jqc-row-del{ display:none !important; }
	.jqc-app{ background:#fff; padding:0; }
	.jqc-card,.jqc-banner{ box-shadow:none; border:1px solid #999; break-inside:avoid; }
}

/* ================= v0.4.0：完整 8D 步驟新增樣式 ================= */

/* ---------- 工具列／模式切換（逐條比照原型 .mode-toggle/.mode-btn） ---------- */
.jqc-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.jqc-mode-toggle{ display:flex; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden; flex:none; }
.jqc-mode-btn{ padding:8px 14px; background:var(--surface); border:none; border-right:1px solid var(--border-strong); cursor:pointer; font-size:12.5px; color:var(--text-2); font-family:inherit; }
.jqc-mode-btn:last-child{ border-right:none; }
.jqc-mode-btn.active{ background:var(--accent); color:#fff; font-weight:600; }
.jqc-mode-hint{ margin-top:0; flex:1 1 260px; }

/* 簡易模式：隱藏標記為選填的卡片（D1／D6／D8），內容仍保留於表單中一併送出 */
#jqc-case-form[data-jqc-mode="simple"] [data-jqc-optional]{ display:none; }

/* ---------- 參考範例／歷史案例庫面板 ---------- */
.jqc-ref-example{
	background:var(--accent-soft); border:1px solid var(--border); border-radius:10px;
	padding:14px 16px; margin-bottom:14px;
}
.jqc-ref-example-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.jqc-ref-example-head strong{ font-family:var(--font-display); font-size:14px; }
.jqc-ref-example p.jqc-hint{ margin-top:6px; }
.jqc-ref-case-list{ display:flex; flex-direction:column; gap:8px; }
.jqc-ref-case-item{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.jqc-ref-case-top{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; flex:1 1 220px; min-width:0; }
.jqc-ref-case-top .jqc-dot{ width:7px; height:7px; border-radius:50%; background:var(--dot,var(--muted)); flex:none; }
.jqc-ref-case-meta{ font-size:11.5px; color:var(--muted); flex:1 1 160px; }
.jqc-ref-loading, .jqc-ref-empty-msg{ font-size:12.5px; color:var(--muted); }

/* ---------- 6M 魚骨圖（v0.5.5：魚頭獨立為右側欄位，與方框／骨刺完全分開，不會再被最右側的骨刺蓋住文字） ---------- */
.jqc-fishbone{ display:flex; flex-direction:column; }
.jqc-bone-panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px; position:relative; }
.jqc-bone-panel-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px; font-weight:600; }
.jqc-bone-tag{ width:22px; height:22px; border-radius:6px; background:var(--tag-color,var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; font-family:var(--font-display); }
.jqc-bone-panel textarea{ font-size:12.5px; border:1px solid var(--border); background:var(--surface); }
.jqc-rootcause-box{ margin-top:16px; background:var(--accent-soft); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.jqc-rootcause-box label{ display:block; font-size:12px; font-weight:600; margin-bottom:6px; color:var(--accent-ink); }
.jqc-rootcause-box textarea{ background:var(--surface); border:1px solid var(--border); font-size:13px; }

/* jqc-fb-main：左側 jqc-fb-body（方框＋脊椎，寬度＝整體寬度扣掉魚頭）＋右側 jqc-fb-head-wrap（魚頭獨立欄位，
   絕對不會與方框重疊，不論分類名稱長短），確保最右側方框的骨刺只會落在脊椎範圍內，不會疊到魚頭文字上。 */
.jqc-fb-main{ display:flex; align-items:center; gap:0; }
.jqc-fb-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.jqc-fb-head-wrap{ flex:none; display:flex; align-items:center; margin-left:-1px; }
.jqc-fb-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.jqc-fb-row-top .jqc-bone-panel{ margin-bottom:26px; }
.jqc-fb-row-bottom .jqc-bone-panel{ margin-top:26px; }
/* 每個類別方框都有一條斜線「骨刺」實際連到中央脊椎（線段夠長、角度夠緩，旋轉後的垂直投影
   會確實蓋過方框與脊椎之間的間距，讓骨刺與脊椎重疊咬合，而不是留下視覺上的斷點），
   方向統一朝右上／右下傾斜（朝魚頭方向匯入），才會有標準魚骨圖（Ishikawa）每一根骨頭都
   斜向連到主幹的視覺效果。上排：骨刺從方框底部往右下斜接到脊椎；下排：骨刺從方框頂部往右上斜接到脊椎。 */
.jqc-fb-row-top .jqc-bone-panel::after,
.jqc-fb-row-bottom .jqc-bone-panel::before{
	content:""; position:absolute; left:50%; width:4px; height:44px;
	background:var(--tag-color,var(--accent)); border-radius:2px; opacity:.85;
}
.jqc-fb-row-top .jqc-bone-panel::after{ bottom:-38px; transform:translateX(-50%) rotate(-30deg); transform-origin:top center; }
.jqc-fb-row-bottom .jqc-bone-panel::before{ top:-38px; transform:translateX(-50%) rotate(30deg); transform-origin:bottom center; }
@media (max-width:700px){
	.jqc-fb-row-top .jqc-bone-panel::after,
	.jqc-fb-row-bottom .jqc-bone-panel::before{ display:none; }
	.jqc-fb-row-top .jqc-bone-panel{ margin-bottom:16px; }
	.jqc-fb-row-bottom .jqc-bone-panel{ margin-top:16px; }
}

/* 中央脊椎：加粗實色橫桿，右端接魚頭（不再有左側魚尾小箭頭） */
.jqc-fb-spine-zone{ position:relative; display:flex; align-items:center; height:10px; margin:0; }
.jqc-fb-spine-line{
	flex:1; height:7px; border-radius:3px; position:relative;
	background:var(--tag-color,var(--accent));
}
/* 右端魚頭：以 clip-path 切出箭頭／五邊形，內容為目前選擇的缺陷分類（即魚骨圖的「效果」）；
   現在獨立於 jqc-fb-head-wrap 欄位中，水平方向與所有方框／脊椎完全分開，不會被骨刺蓋住。 */
.jqc-fb-head{
	flex:none; position:relative;
	background:var(--tag-color,var(--accent)); color:#fff; font-weight:700; font-size:12.5px;
	padding:9px 22px 9px 20px; max-width:200px;
	clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
@media (max-width:700px){
	.jqc-fb-row{ grid-template-columns:1fr; }
	.jqc-fb-main{ flex-direction:column; align-items:stretch; }
	.jqc-fb-head-wrap{ margin-left:0; margin-top:14px; justify-content:center; }
	.jqc-fb-head{ max-width:220px; font-size:11.5px; padding:8px 16px; clip-path:none; border-radius:8px; text-align:center; }
}

/* ---------- D6 檢驗數據表格輸入 + 圖表（逐條比照原型 .cell-input/.judge/.chart-*） ---------- */
.jqc-cell-input{ width:100%; min-width:64px; padding:6px 7px; font-size:12.5px; border:1px solid transparent; background:transparent; border-radius:5px; }
.jqc-cell-input:hover{ border-color:var(--border); }
.jqc-cell-input:focus-visible{ background:var(--surface); border-color:var(--accent); }
.jqc-judge{ font-size:12px; font-weight:700; white-space:nowrap; }
.jqc-judge-pass{ color:var(--good); }
.jqc-judge-fail{ color:var(--critical); }
.jqc-judge-muted{ color:var(--muted); font-weight:400; }
.jqc-chart-wrap{ margin-top:16px; }
.jqc-chart-legend{ display:flex; gap:16px; margin-bottom:6px; }
.jqc-legend-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); }
.jqc-legend-dot{ width:9px; height:9px; border-radius:2px; }
.jqc-chart-svg{ width:100%; height:200px; overflow:visible; }
.jqc-chart-axis-line{ stroke:var(--border-strong); stroke-width:1; }
.jqc-chart-ref{ stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 4; }
.jqc-chart-ref-label{ font-family:var(--font-mono); font-size:10px; fill:var(--muted); }
.jqc-chart-val{ font-family:var(--font-mono); font-size:11px; fill:var(--text); font-weight:600; }
.jqc-chart-axis{ font-family:var(--font-mono); font-size:10.5px; fill:var(--muted); }
.jqc-chart-empty{ font-size:12.5px; color:var(--muted); padding:20px 0; text-align:center; }

/* ================= v0.5.0：分析完成標記／逾期徽章／Word匯出 ================= */
.jqc-pill-finalized{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.jqc-pill-draft{ background:var(--surface-2); color:var(--muted); }
.jqc-pill-overdue{ background:rgba(208,59,59,0.12); border-color:var(--critical); color:var(--critical); font-weight:600; }
.jqc-pill-ontrack{ background:rgba(12,163,12,0.10); border-color:var(--good); color:var(--good); }
#jqc-finalize-card .jqc-card-head{ background:var(--accent-soft); }

/* ---------- CAR 管理看板：彙總統計卡片 ---------- */
.jqc-dash-summary{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:20px; }
.jqc-dash-tile{
	background:var(--surface); border:1px solid var(--border); border-radius:12px;
	padding:14px 12px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow-card);
}
.jqc-dash-tile-num{ font-family:var(--font-mono); font-size:24px; font-weight:700; line-height:1; }
.jqc-dash-tile-label{ font-size:11.5px; color:var(--muted); }
.jqc-dash-tile-overdue{ border-color:var(--critical); }
.jqc-dash-tile-overdue .jqc-dash-tile-num{ color:var(--critical); }
.jqc-dash-tile-open .jqc-dash-tile-num{ color:var(--accent-ink); }
.jqc-dash-tile-draft .jqc-dash-tile-num{ color:var(--muted); }
.jqc-dash-tile-closed .jqc-dash-tile-num{ color:var(--good); }
.jqc-dash-table{ min-width:920px; }
@media (max-width:900px){ .jqc-dash-summary{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .jqc-dash-summary{ grid-template-columns:repeat(2,1fr); } }

/* ================= v0.5.1：頁尾版本標示（方便確認網站上是否已更新到最新版本） ================= */
.jqc-build-tag{ margin:22px 0 0; padding-top:10px; border-top:1px dashed var(--border); text-align:right; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); letter-spacing:.02em; }

/* ================= v0.5.2：[jaro_car_form] 單一頁面整合中心──選單列 ================= */
.jqc-hub-wrap{ max-width:980px; }
.jqc-hub-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.jqc-hub-nav-item{
	display:inline-flex; align-items:center; padding:9px 16px; border-radius:8px;
	font-size:13.5px; font-weight:600; text-decoration:none;
	background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
}
.jqc-hub-nav-item:hover{ background:var(--surface-3); color:var(--text); }
.jqc-hub-nav-item.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* Hub 選單卡片與下方內容卡片之間縮小間距，視覺上讀起來像同一組介面 */
.jqc-app:has(> .jqc-hub-wrap){ padding-bottom:12px; margin-bottom:-12px; }