@charset "utf-8";
  :root{
    --bg:#f7f7f7; --card:#ffffff; --primary:#3caea3; --accent:#6ec1e4; --muted:#6b7280;
  }
  *{box-sizing:border-box}
  body{ margin:0; padding:18px; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial; background:var(--bg); color:#0f172a; -webkit-font-smoothing:antialiased; }
  header{ text-align:center; background:linear-gradient(90deg,var(--accent),var(--primary)); color:white; padding:14px 18px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.08); font-weight:600; margin-bottom:14px; }
  main{ max-width:1100px; margin:0 auto; }

  .controls{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
  .btn-file{ background:linear-gradient(90deg,var(--primary),#2b8a78); color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; }
  .controls button, .controls select{ padding:9px 12px; border-radius:8px; border:none; background:var(--primary); color:#fff; cursor:pointer; font-size:0.95rem; }
  .controls select{ background:var(--card); color:#111; border:1px solid #e6eef0; }
  .canvas-card{ background:var(--card); padding:12px; border-radius:10px; box-shadow:0 6px 18px rgba(12,24,40,0.04); border:1px solid #e9f2f1; margin-bottom:16px; }
  #canvas-wrap{ display:flex; justify-content:center; align-items:center; background:var(--bg); padding:14px; border-radius:8px; position:relative; }
  canvas.imageCanvas, canvas.overlayCanvas{ border-radius:6px; display:block; max-width:100%; height:auto; border:1px solid #e6eef0; background:transparent; }
  canvas.overlayCanvas{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
  .card{ background:var(--card); padding:12px; border-radius:10px; box-shadow:0 4px 12px rgba(12,24,40,0.04); border:1px solid #eef6f5; margin-bottom:12px; }
  table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
  th,td{ padding:8px 6px; text-align:center; border-bottom:1px solid #f1f6f6; vertical-align:middle; }
  th{ background:#f9fafb; font-weight:600; }
  tr:nth-child(even){ background:#fbfdfe; }
  .color-box{ width:20px; height:20px; border-radius:4px; border:1px solid #d0d7d6; display:inline-block; vertical-align:middle; }
  .footer{ text-align:center; margin-top:10px; color:var(--muted); font-size:0.92rem; }
  .signature{ font-style:italic; color:#556; font-size:0.88rem; margin-top:6px; }
  .small{ font-size:0.86rem; color:var(--muted); }
  .annotations-area input[type="text"]{ width:100%; padding:6px; border-radius:6px; border:1px solid #e6eef0; }
  .icon-btn{ background:transparent; border:none; cursor:pointer; color:#b00; font-size:1.0rem; }
  .include-labels { display:flex; align-items:center; gap:8px; margin-top:8px; }
a:link {
	text-decoration: none;
	color: #06F;
}
a:visited {
	text-decoration: none;
	color: #06F;
}
a:hover {
	text-decoration: underline;
	color: #06F;
}
a:active {
	text-decoration: none;
	color: #06F;
}