:root{
  --bg:#0b1220;--card:#0f172a;--ink:#e5e7eb;--line:#1f2a44;--accent:#22d3ee;--ok:#27e38c
}
*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(180deg,#0b1220,#0a1020);
  color:var(--ink);
  font-family:system-ui,Segoe UI,Roboto,Arial
}
.wrap{max-width:1100px;margin:24px auto;padding:16px}
h1{margin:0 0 12px;font-size:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.row{display:grid;gap:12px}
@media(min-width:860px){
  .row-2{grid-template-columns:1fr 1fr}
  .row-3{grid-template-columns:1fr 1fr 1fr}
}
input,select,button{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #26324f;
  background:#0b1327;
  color:var(--ink)
}
button{background:var(--accent);color:#001018;border:0;font-weight:700;cursor:pointer}
.small{opacity:.85;font-size:13px}
.mono{font-family:ui-monospace,Consolas,monospace}
.tag{
  display:inline-block;background:#101b36;border:1px solid #203055;
  padding:2px 8px;border-radius:999px;font-size:12px;margin:4px 6px 0 0
}
.day{padding:10px;border:1px solid #203055;border-radius:12px;background:#0b1327;margin-bottom:12px}
.day-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.legend{display:flex;gap:10px;align-items:center;font-size:13px}
.chip{display:inline-block;width:14px;height:8px;border-radius:3px}
.mw{background:var(--ok)}

.svg-wrap{overflow-x: visible}           /* เดิมเป็น auto → เอาสกรอลล์ออก */
.svg-wrap svg.timeline{width:100%;height:auto;display:block}  /* ทำให้ SVG ยืดหดตามกล่อง */
.dir-note{font-size:12px;opacity:.85;margin-top:4px}

table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
td,th{border-top:1px solid #203055;padding:6px 4px;text-align:left}
.dir-note{font-size:12px;opacity:.85;margin-top:4px}

@media (max-width: 520px){
  .card{padding:12px}
  .day{padding:8px}
  .tag{font-size:11px}
  table{font-size:12px}
}