* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; background: #1a1a2e; color: #fff; display: flex; flex-direction: column; height: 100dvh; margin: 0; overflow: hidden; }

#header {
    background: linear-gradient(135deg, #16213e, #0f3460);
    border-bottom: 2px solid #e94560;
  }
  #top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
  }
  #title {
    color: #e94560;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  #top-bar select {
    flex: 1;
    background: #0f3460;
    color: white;
    border: 1px solid #e94560;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 15px;
  }
  #mode-toggle {
    background: #0f3460;
    border: 1px solid #e94560;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 19px;
    cursor: pointer;
    white-space: nowrap;
  }

  #header h1 { font-size: 27px; color: #e94560; letter-spacing: 2px; }
  #header p { font-size: 15px; color: #a0a0b0; margin-top: 4px; }

#filter-bar {
    background: #16213e;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid #0f3460;
  }

  .filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .filter-label {
    font-size: 15px;
    color: #a0a0b0;
    white-space: nowrap;
  }

  select {
    background: #0f3460;
    color: #fff;
    border: 1px solid #e94560;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 17px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e94560' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }

  .legend-item { display: flex; align-items: center; gap: 4px; }
  .legend-dot {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: inline-block;
    flex-shrink: 0;
  }

  #map { flex: 1; width: 100%; min-height: 0; }
  #schedule { flex: 1; width: 100%; overflow-y: auto; background: #0f1b30; display: none; }
  #tab-bar { background: #16213e; display: flex; border-bottom: 1px solid #0f3460; flex-shrink: 0; }
  .tab-btn {
    flex: 1; padding: 9px 0; font-size: 16px; font-weight: bold;
    background: none; border: none; color: #a0a0b0; cursor: pointer;
    border-bottom: 3px solid transparent; transition: all 0.15s;
  }
  .tab-btn.active { color: #e94560; border-bottom-color: #e94560; }
  .sch-date-header {
    background: #16213e; padding: 6px 12px; font-size: 15px;
    color: #a0a0b0; border-bottom: 1px solid #0f3460;
    display: flex; align-items: center; gap: 8px;
  }
  .sch-date-today { background: #e94560; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 3px; }
  .sch-date-count { margin-left: auto; font-size: 13px; color: #555; }
  .sch-card {
    margin: 8px 10px; padding: 10px 12px;
    background: #16213e; border-radius: 8px;
    border-left: 4px solid #e94560; display: flex; gap: 10px; align-items: baseline;
  }
  .sch-time { min-width: 48px; text-align: center; }
  .sch-time-start { font-size: 18px; font-weight: bold; color: #fff; line-height: 1; }
  .sch-time-end { font-size: 14px; color: #888; margin-top: 2px; }
  .sch-info { flex: 1; min-width: 0; }
  .sch-name { font-size: 18px; font-weight: bold; color: #e94560; margin-bottom: 3px; }
  .sch-loc { font-size: 14px; color: #a0a0b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sch-pref-badge { font-size: 13px; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; font-weight: bold; }
  .pref-tokyo { background: #1a3a5c; color: #5ab4ff; }
  .pref-saitama { background: #3a2a00; color: #ffc844; }
  .pref-kanagawa { background: #0a3a1a; color: #44cc88; }
  .pref-chiba { background: #3a1a2a; color: #ff88bb; }

  #count-bar {
    background: #16213e;
    padding: 6px 16px;
    font-size: 16px;
    color: #a0a0b0;
    border-top: 1px solid #0f3460;
    text-align: center;
  }

  .popup-box { font-family: -apple-system, sans-serif; min-width: 220px; }
  .popup-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
  }
  .popup-name { font-size: 19px; font-weight: bold; color: #1a1a2e; margin-bottom: 4px; }
  .popup-facility { font-size: 17px; color: #444; margin-bottom: 3px; }
  .popup-address { font-size: 16px; color: #666; margin-bottom: 3px; }
  .popup-date { font-size: 17px; font-weight: bold; margin-bottom: 3px; }
  .popup-schedule { font-size: 16px; color: #555; margin-bottom: 3px; }
  .popup-recurrence { font-size: 15px; color: #888; margin-bottom: 3px; }
  .popup-phone { font-size: 17px; font-weight: bold; color: #e94560; }
  .popup-verify {
    margin-top: 8px; padding: 8px 10px;
    background: #FFF3CD; border: 1px solid #FFE08A; border-radius: 6px;
    font-size: 16px; color: #7A5D00; line-height: 1.6;
  }
  .verify-link { color: #1a6fb3; word-break: break-all; text-decoration: underline; }
  .popup-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .popup-link { flex: 1; min-width: calc(50% - 3px);
    display: block; text-align: center; padding: 6px 10px;
    border-radius: 6px; font-size: 20px; font-weight: bold;
    text-decoration: none; transition: opacity 0.2s;
  }
  .popup-link:hover { opacity: 0.8; }
  .cal-link { background: #4285F4; color: #fff; }
  .map-link { background: #E67E22; color: #000; }

  @keyframes pulse {
    0% { transform: rotate(-45deg) scale(1); }
    50% { transform: rotate(-45deg) scale(1.35); }
    100% { transform: rotate(-45deg) scale(1); }
  }
  .pin-today { animation: pulse 1.2s ease-in-out infinite; }