/* Minimal, Safari-friendly, no Tailwind dependency */
:root{
  --bg:#ffffff;
  --card:#f6f7f9;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;
  --gap: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#111827;font-family:var(--sans)}
.top{padding:22px 18px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px;max-width:1200px;margin:0 auto}
.emoji{font-size:34px;line-height:1}
.title{font-weight:800;font-size:40px;letter-spacing:.2px}
.wrap{max-width:1200px;margin:0 auto;padding:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-hd{display:flex;align-items:center;gap:10px;padding:16px 16px 8px 16px}
.icon{font-size:20px}
.hd-title{font-weight:800;font-size:22px}
.protocol{padding-bottom:14px}
.protocol-list{padding:4px 16px 12px 16px;color:#111827}
.protocol-list .row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;line-height:1.45}
.dot{width:16px;height:16px;border-radius:999px;display:inline-block;flex:0 0 16px;margin-top:3px;border:1px solid rgba(0,0,0,.12)}

/* === ONLY CHANGE: gg 粉燈（大特價）使用粉色愛心 icon === */
.dot.gg{
  background:transparent;
  border:0;
  position:relative;
}
.dot.gg::before{
  content:"🩷";
  position:absolute;
  left:0;
  top:-1px;
  font-size:16px;
  line-height:16px;
}

.dot.g{background:#3bd16f}
.dot.b{background:#2b6cb0}
.dot.y{background:#f6ad55}
.dot.r{background:#e53e3e}
.note{padding:0 16px 12px 16px;color:var(--muted);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--gap);margin-top:18px}
@media (max-width: 980px){ .grid{grid-template-columns:repeat(2, 1fr)} .title{font-size:30px}}
@media (max-width: 640px){ .grid{grid-template-columns:1fr} .title{font-size:28px}}

.tile{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;min-height:116px}
.tile.loading{background:#fff7db}
.tile .name{font-weight:800;font-size:18px;display:flex;align-items:center;gap:10px}
.badge{font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#f8fafc;color:#334155}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.kpi{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.kpi b{font-family:var(--mono)}
.kpi .lbl{color:var(--muted)}
.status{margin-top:12px;border-radius:10px;padding:10px 10px;font-weight:800;text-align:center;border:1px solid rgba(0,0,0,.08)}

/* === ONLY CHANGE: gg 粉燈（大特價）狀態條改粉色系 === */
.status.gg{background:#fce7f3;color:#9d174d;border:1px solid rgba(236,72,153,.35)}

.status.g{background:#d4edda;color:#155724}
.status.b{background:#cce5ff;color:#004085}
.status.y{background:#fff3cd;color:#856404}
.status.r{background:#f8d7da;color:#721c24}

.footer{margin:18px 2px 8px 2px;color:var(--muted);font-size:13px}
.footer .small{margin-top:6px}