:root { --blue:#1f4e79; --blue2:#2e74b5; --bg:#f4f6f9; --card:#fff; --line:#dfe5ec; --text:#1e2530; --muted:#6b7480; --bad:#c0392b; --warn:#b7791f; --ok:#2e8b57; --radius:10px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.55; }
a { color:var(--blue2); }
header.hero { background:linear-gradient(135deg,#1f4e79,#2e74b5); color:#fff; padding:28px 24px 22px; }
header.hero .inner { max-width:1200px; margin:0 auto; }
header.hero h1 { margin:0; font-size:26px; letter-spacing:.5px; }
header.hero h1 small { font-weight:normal; font-size:14px; opacity:.85; margin-left:10px; }
header.hero p { margin:8px 0 0; opacity:.92; max-width:820px; }
.layout { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:170px 1fr; gap:20px; padding:20px; }
nav { position:sticky; top:16px; align-self:start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:8px; }
nav a { display:block; padding:7px 10px; border-radius:6px; text-decoration:none; color:var(--text); font-size:14px; }
nav a.active, nav a:hover { background:#e8f0fa; color:var(--blue); font-weight:bold; }
nav a b { color:var(--blue2); margin-right:6px; font-size:12px; }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } nav { position:static; display:flex; flex-wrap:wrap; gap:2px; } nav a { padding:5px 8px; } }
main section { margin-bottom:28px; }
main h2 { font-size:20px; color:var(--blue); margin:0 0 4px; }
main h2 b { color:var(--blue2); font-size:13px; margin-right:8px; vertical-align:middle; background:#e8f0fa; padding:2px 8px; border-radius:12px; }
main .lead { color:var(--muted); margin:0 0 12px; font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; }
.card h3 { margin:0 0 10px; font-size:15px; color:var(--blue2); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px) { .grid2 { grid-template-columns:1fr; } }
.muted { color:var(--muted); }
.sub { font-size:12px; color:var(--muted); line-height:1.4; }
.hl { background:#fff8e1; border-left:4px solid var(--warn); padding:8px 12px; border-radius:4px; }
.warnp { color:var(--warn); }
button { font-family:inherit; font-size:14px; padding:7px 14px; border:1px solid var(--blue2); background:#fff; color:var(--blue2); border-radius:6px; cursor:pointer; }
button:hover { background:#e8f0fa; }
button.primary { background:var(--blue2); color:#fff; }
button.primary:hover { background:var(--blue); }
button.link { border:none; background:none; color:var(--muted); padding:2px 6px; }
button.link:hover { color:var(--bad); }
input[type=text], input[type=number], select { font-family:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
textarea { width:100%; height:130px; padding:8px; border:1px solid var(--line); border-radius:6px; font-family:Consolas,monospace; font-size:13px; resize:vertical; }
label.lbl { display:block; font-size:13px; color:var(--muted); margin:6px 0 3px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.row > * { flex:0 0 auto; }
.field { display:flex; flex-direction:column; gap:3px; min-width:160px; }
.dropzone { border:2px dashed #b9c6d6; border-radius:var(--radius); padding:26px; text-align:center; color:var(--muted); cursor:pointer; transition:.15s; }
.dropzone.over, .dropzone:hover { border-color:var(--blue2); background:#f0f6fd; color:var(--blue); }
.dropzone b { color:var(--blue2); }
.status { margin:10px 0 0; padding:8px 12px; border-radius:6px; font-size:14px; background:#eef3f9; }
.status.ok { background:#e6f4ec; color:#1f6b3f; }
.status.warn { background:#fdecea; color:var(--bad); }
.samples { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.sample { text-align:left; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; display:grid; grid-template-columns:34px 1fr; gap:2px 10px; align-items:start; }
.sample:hover { border-color:var(--blue2); background:#f7faff; }
.sample .icon { font-size:24px; grid-row:span 3; }
.sample .t { font-weight:bold; color:var(--text); }
.sample .s { font-size:12px; color:var(--muted); }
.tag { display:inline-block; font-size:11px; padding:1px 8px; border-radius:10px; background:#eef; color:#446; margin-top:4px; justify-self:start; }
.tag-類別對照, .tag-時間對照 { background:#e3f0ff; color:#1f4e79; }
.tag-符合班佛 { background:#e6f4ec; color:#1f6b3f; }
.tag-不符合, .tag-關卡型態 { background:#fdecea; color:var(--bad); }
.tag-上限效應 { background:#fff3d6; color:#8a5a00; }
.group { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.group:last-child { border-bottom:none; }
.group input { flex:1; min-width:100px; border:1px solid transparent; background:transparent; }
.group input:hover, .group input:focus { border-color:var(--line); background:#fff; }
.group .n { color:var(--muted); font-size:13px; white-space:nowrap; }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }
.chip { font-size:11px; background:#eef; padding:1px 7px; border-radius:10px; color:#446; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { border:1px solid var(--line); padding:6px 8px; text-align:center; vertical-align:middle; }
th { background:#e8eef6; color:#2c3e50; font-weight:600; }
td:first-child { text-align:left; }
td.flag { background:#fde9d9; }
td.ok, .badge.ok { color:var(--ok); font-weight:bold; }
td.warnc, .badge.warnc { color:var(--warn); font-weight:bold; }
td.bad, .badge.bad { color:var(--bad); font-weight:bold; }
.scroll { overflow-x:auto; }
#preview table td, #preview table th { white-space:nowrap; font-size:12px; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.tabs button { border-radius:20px; }
.tabs button.active { background:var(--blue2); color:#fff; }
.chartbox { position:relative; width:100%; }
.smgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:12px; }
.smgrid .chartbox { background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px; }
details { margin-top:8px; }
details summary { cursor:pointer; font-size:14px; padding:6px 0; }
.heat { display:inline-block; margin:6px 14px 12px 0; vertical-align:top; }
.heat-title { font-size:13px; margin-bottom:4px; }
.heatmap td { width:34px; height:26px; padding:0; font-size:11px; cursor:default; }
.heatmap th { width:24px; padding:2px; font-size:11px; }
.diaggrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; }
.diag { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.diag h3 { margin:0 0 8px; font-size:16px; color:var(--text); }
.diag ul { margin:6px 0 0; padding-left:18px; }
.diag li { margin-bottom:5px; font-size:14px; }
.badges { font-size:13px; color:var(--muted); margin-bottom:8px; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; background:#f1f3f6; margin-right:6px; }
.todo { list-style:none; padding:0; margin:0; }
.todo li { display:flex; gap:10px; margin-bottom:8px; align-items:flex-start; }
.todo .step { flex:0 0 22px; height:22px; border-radius:50%; background:var(--blue2); color:#fff; text-align:center; font-size:12px; line-height:22px; }
.kb { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.kb .card { margin:0; }
.kb table td:first-child { text-align:left; font-weight:600; width:42%; }
.formula { text-align:center; font-family:Consolas,monospace; background:#f4f6f9; padding:8px; border-radius:6px; margin:6px 0; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:24px; }
.exportbtns button { margin:4px 6px 4px 0; }
@media print {
  header.hero, nav, #s01, #s06, .tabs, .exportbtns, #showBandLbl, .dropzone, .status { display:none !important; }
  .layout { display:block; padding:0; }
  .card, .diag, .smgrid .chartbox { break-inside:avoid; border:1px solid #ccc; }
  body { background:#fff; font-size:12px; }
  main section { margin-bottom:14px; }
  .print-only { display:block !important; }
}
.print-only { display:none; }