*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,'Meiryo',sans-serif;color:#222;background:#fff;font-size:13px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1595dc;outline-offset:-3px}[hidden]{display:none!important}.topbar{height:52px;display:flex;background:#222;color:white;align-items:stretch;white-space:nowrap}.topbar nav{display:flex;flex-shrink:0}.topbar nav button{border:0;border-right:3px solid #222;border-bottom:3px solid #222;background:#777;color:#fff;padding:0 14px;font-size:12px;min-height:52px}.topbar nav button.active{background:#fff;color:#111;font-weight:bold;border-bottom-color:white}.topbar nav button.logout{background:#e57720}.topbar nav button:hover{filter:brightness(1.12)}.legend{display:flex;align-items:center;gap:18px;margin-left:auto;padding:0 16px;font-size:11px}.legend>span{display:flex;align-items:center;gap:6px}.bus-symbol{--bus-color:#258cc9;display:inline-block;position:relative;width:29px;height:34px;border-radius:4px;background:var(--bus-color);border:2px solid var(--bus-color);box-shadow:0 3px 0 -1px var(--bus-color)}.bus-symbol:before{content:'';position:absolute;top:3px;left:3px;right:3px;height:13px;background:white;border-radius:1px}.bus-symbol:after{content:'●　●';position:absolute;bottom:0;left:1px;right:1px;font-style:normal;font-size:9px;line-height:9px;color:white}.blue{--bus-color:#258cc9}.amber{--bus-color:#efb43e}.red{--bus-color:#dc0032}.gray{--bus-color:#555}.refresh{background:#f2f2f2;border:0;border-left:3px solid #222;min-width:48px;font-size:24px;line-height:24px;color:#333}.refresh span{display:block;font-size:12px;line-height:16px}.toolbar{height:40px;display:flex;align-items:center;gap:15px;background:white;padding:0 8px;white-space:nowrap;border-bottom:1px solid #ddd}.vehicle-search{display:flex;align-items:center;font-size:22px;gap:4px}.vehicle-search input{font-size:12px;width:100px;border:0;padding:5px 0;background:white}.toolbar select{min-width:125px;height:23px;padding:0 3px}.toolbar #dataUpdated{color:#666;margin-left:auto;font-size:11px}.toolbar #clock{color:#555;font-size:11px}main{height:calc(100dvh - 92px)}.view{display:none;height:100%;overflow:auto;padding:22px;background:#f6f6f6}.view.active{display:block}#view-map{padding:0;position:relative;background:#dce4d8}#map{height:100%;width:100%;z-index:0}.map-notice,.map-error{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:600;max-width:90%;padding:12px 18px;background:#fff;border:1px solid #aaa;box-shadow:0 2px 5px #0002}.map-error{top:auto;bottom:14px;color:#a00020}.page-heading{display:flex;align-items:baseline;gap:20px;margin-bottom:20px;border-bottom:2px solid #555;padding-bottom:12px}.page-heading h1{margin:0;font-size:22px}.page-heading span,.note{color:#666}.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:16px 0}.bus-card,.panel,.duty-group{background:white;border:1px solid #ccc;padding:14px;margin-bottom:12px}.bus-route{font-size:17px;font-weight:bold;margin-bottom:10px}.bus-info{line-height:1.9}.vehicle{font-size:19px;font-weight:bold}.device{font-family:monospace;overflow-wrap:anywhere}.small{font-size:12px;color:#666}.bus-card button,.panel button,form button{padding:6px 12px}.bus-card input,input{padding:6px;border:1px solid #aaa}.highlight{border-color:#e78a21}.registered-row{display:grid;grid-template-columns:1fr 230px 75px;gap:12px;padding:12px;border-bottom:1px solid #ddd;background:white}.registered-summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.registered-edit-form{display:flex;gap:6px}.registered-edit-form input{width:140px}details{margin:18px 0;border:1px solid #ccc;background:white}summary{padding:12px;cursor:pointer;font-weight:bold;background:#eee}.history-card{padding:12px;border-bottom:1px solid #ddd}.history-main{font-size:14px}.history-sub{margin-top:4px;color:#666}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.summary-grid>div{padding:20px;background:white;border:1px solid #ccc}.summary-grid strong{display:block;font-size:36px;margin-top:12px}.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.rank-row{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #ddd;background:white;cursor:pointer}.rank-row b{white-space:nowrap}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:white}th,td{padding:11px 14px;border:1px solid #ddd;text-align:left;white-space:nowrap}th{background:#e9e9e9}tr[data-device]{cursor:pointer}tr[data-device]:hover{background:#eaf4fa}.duty-group h2{margin:0 0 12px;font-size:18px}.status-chip{border-left:5px solid var(--status-color,#258cc9);padding-left:8px;font-weight:bold}#detailPanel{position:fixed;top:100px;right:12px;bottom:12px;width:340px;z-index:800;background:white;border:1px solid #888;box-shadow:0 5px 30px #0003;padding:18px;overflow:auto}#closeDetail{float:right;padding:6px}.result-detail{line-height:2;clear:both;margin-top:15px}.result-vehicle{font-size:30px;font-weight:bold}.result-route{font-size:18px;font-weight:bold}.console-marker{background:none;border:0}.bus-pin{--status-color:#258cc9;position:relative;width:33px;height:43px;background:var(--status-color);border-radius:4px;border:1px solid white;box-shadow:0 1px 3px #0006;text-align:center;color:white;line-height:12px;padding:2px 2px 8px;font-family:Arial,sans-serif;font-size:10px}.bus-pin:before,.bus-pin:after{content:'';position:absolute;bottom:0;width:4px;height:5px;background:#222;border-radius:0 0 2px 2px}.bus-pin:before{left:4px}.bus-pin:after{right:4px}.bus-pin .route-label{display:block;overflow:hidden;font-size:10px;line-height:12px;white-space:nowrap;font-weight:bold}.bus-pin .vehicle-label{display:block;color:#222;background:#fff;font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden}.bus-pin .lamps{color:white;line-height:6px;font-size:9px}.leaflet-popup-content{line-height:1.7}.stop-pin{background:#f344d0;border:1.5px solid white;box-shadow:0 0 0 1px #ef40b7;border-radius:50%}#logoutScreen{position:fixed;inset:0;z-index:2000;background:#eee;display:grid;place-items:center;text-align:center}#logoutScreen button{padding:12px 24px}.delay-red{color:#c90020}.delay-orange{color:#bd6b00}.delay-green{color:#176a2e}.delay-blue{color:#186cc1}@media(max-width:1500px){.legend{gap:9px;padding:0 8px}.topbar nav button{padding:0 9px}.legend>span{gap:3px;font-size:10px}}@media(max-width:1150px){.topbar{height:auto;min-height:52px;flex-wrap:wrap}.topbar nav{width:100%;overflow-x:auto}.topbar nav button{flex:1}.legend{margin:0;flex:1;min-height:43px;justify-content:flex-end}.refresh{height:43px}.toolbar{height:auto;min-height:40px;flex-wrap:wrap;gap:8px;padding:5px 8px}main{height:calc(100dvh - 140px)}.toolbar #clock{display:none}.registered-row{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.rank-grid{grid-template-columns:1fr}}@media(max-width:600px){.view{padding:12px}.legend{justify-content:flex-start;gap:8px}.bus-symbol{width:20px;height:26px}.legend>span{font-size:9px}.bus-symbol:before{height:9px}.bus-symbol:after{font-size:7px}.page-heading{display:block}.page-heading span{display:block;margin-top:8px}#detailPanel{left:10px;right:10px;width:auto}.toolbar #dataUpdated{width:100%;margin:0}main{height:calc(100dvh - 165px)}}

/* Readability adjustment: registration numbers and popup details only. */
.bus-pin{width:50px;height:54px;padding:2px 2px 9px}
.bus-pin .route-label{font-size:12px;line-height:16px}
.bus-pin .vehicle-label{font-size:16px;font-weight:700;line-height:21px;letter-spacing:.2px}
.bus-pin .vehicle-label.long-number{font-size:12px;letter-spacing:0}
.bus-pin .lamps{font-size:10px;line-height:7px}
.leaflet-popup-content{font-size:16px;line-height:1.8;margin:16px 18px;overflow-wrap:anywhere}
.leaflet-popup .result-detail{font-size:16px;line-height:1.85;margin-top:12px}
.leaflet-popup .result-route{font-size:18px;line-height:1.5;margin-top:6px}
.leaflet-popup .device{font-size:14px}

/* MONITOR_BUS_SIZE_20261111: 1.5 times the previous map marker. */
.console-marker .bus-pin {
  width: 75px;
  height: 81px;
  padding: 3px 3px 14px;
  border-radius: 6px;
  border-width: 2px;
}
.console-marker .bus-pin .route-label { font-size: 18px; line-height: 24px; }
.console-marker .bus-pin .vehicle-label {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: .3px;
}
.console-marker .bus-pin .vehicle-label.long-number { font-size: 18px; letter-spacing: 0; }
.console-marker .bus-pin .lamps { font-size: 15px; line-height: 10px; }
.console-marker .bus-pin::before, .console-marker .bus-pin::after { width: 6px; height: 7px; }
.console-marker .bus-pin::before { left: 6px; }
.console-marker .bus-pin::after { right: 6px; }

/* MONITOR_BUS_COMPACT_20261111 */
.console-marker .bus-pin {
 width:36px;height:42px;padding:1px 1px 7px;border-radius:4px;border-width:1px;
}
.console-marker .bus-pin .route-label {font-size:10px;line-height:12px;}
.console-marker .bus-pin .vehicle-label {font-size:13px;font-weight:700;line-height:17px;letter-spacing:0;}
.console-marker .bus-pin .vehicle-label.long-number {font-size:10px;letter-spacing:0;}
.console-marker .bus-pin .lamps {font-size:9px;line-height:6px;}
.console-marker .bus-pin::before,.console-marker .bus-pin::after {width:4px;height:5px;}
.console-marker .bus-pin::before {left:4px;}
.console-marker .bus-pin::after {right:4px;}
/* MONITOR_BUS_REFERENCE_20261111 */
.console-marker .bus-pin {
  width: 36px;
  height: 42px;
  padding: 2px 3px 10px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: var(--status-color);
  box-shadow: 0 1px 3px #0005;
  color: #fff;
}
.console-marker .bus-pin .route-label {
  display: block;
  height: 11px;
  background: #fff;
  color: #555;
  font: 700 10px/11px Arial, sans-serif;
  border-radius: 1px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.console-marker .bus-pin .vehicle-label {
  display: block;
  height: 16px;
  background: #fff;
  color: #333;
  font: 700 12px/16px Arial, sans-serif;
  letter-spacing: 0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
}
.console-marker .bus-pin .vehicle-label.long-number { font-size: 9px; }
.console-marker .bus-pin .route-label::before,
.console-marker .bus-pin .route-label::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 2px;
  height: 7px;
  background: var(--status-color);
}
.console-marker .bus-pin .route-label::before { left: -3px; }
.console-marker .bus-pin .route-label::after { right: -3px; }
.console-marker .bus-pin .lamps {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.console-marker .bus-pin .lamps::before,
.console-marker .bus-pin .lamps::after {
  content: '';
  width: 6px;
  height: 4px;
  background: #fff;
  border-radius: 1px;
}
.console-marker .bus-pin::before,
.console-marker .bus-pin::after {
  width: 5px;
  height: 4px;
  bottom: -3px;
  background: var(--status-color);
  border-radius: 0 0 2px 2px;
}
.console-marker .bus-pin::before { left: 3px; }
.console-marker .bus-pin::after { right: 3px; }
.legend { gap: 18px; font-size: 11px; }
.legend > span { gap: 5px; font-size: 11px; color: #fff; }
.legend .blue { --bus-color: #169ef1; }
.legend .amber { --bus-color: #ffb929; }
.legend .red { --bus-color: #ed1723; }
.legend .gray { --bus-color: #555; }
.legend .bus-symbol {
  width: 29px;
  height: 33px;
  flex: 0 0 29px;
  border: 1px solid #ffffff55;
  border-radius: 4px;
  background:
    linear-gradient(#fff, #fff) 3px 25px / 5px 3px no-repeat,
    linear-gradient(#fff, #fff) right 3px top 25px / 5px 3px no-repeat,
    var(--bus-color);
  box-shadow: -2px 7px 0 -3px var(--bus-color), 2px 7px 0 -3px var(--bus-color);
}
.legend .bus-symbol::before {
  top: 3px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: #fff;
  border-radius: 1px;
}
.legend .bus-symbol::after {
  content: '';
  top: 10px;
  bottom: auto;
  left: 3px;
  right: 3px;
  height: 12px;
  background: #fff;
  border-radius: 1px;
}
@media (max-width: 600px) {
  .legend { gap: 8px; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; }
  .legend > span { font-size: 9px; gap: 4px; }
}