/* ========================================
       RESET & BASE STYLES
       ======================================== */
    * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh; 
      color: #333;
    }

    /* ========================================
       LAYOUT CONTAINERS
       ======================================== */
    .container { 
      max-width: 1600px; 
      margin: 0 auto; 
      padding: 20px; 
      width: 100%;
    }

    .main-grid { 
      display: grid; 
      grid-template-columns: 1fr; 
      gap: 20px; 
      margin-bottom: 20px; 
    }

    .left-panel { 
      display: flex; 
      flex-direction: column; 
      gap: 20px; 
    }

    .participants-row { 
      display: grid; 
      grid-template-columns: 1fr 300px; 
      gap: 20px; 
      margin-top: 20px; 
    }

    /* ========================================
       HEADER
       ======================================== */
    .header { 
      text-align: center; 
      margin-bottom: 30px; 
      color: white; 
    }

    .header h1 { 
      font-size: clamp(2rem, 4vw, 2.5rem); 
      margin-bottom: 10px; 
      font-weight: 300;
    }

    .header .event-date {
      font-size: clamp(1.05rem, 2.2vw, 1.35rem);
      font-weight: 500;
      letter-spacing: 0.01em;
      opacity: 0.95;
      margin-bottom: 8px;
    }

    .header p { 
      font-size: 1.1rem; 
      opacity: 0.9; 
    }

    /* ========================================
       CONTENT PANELS
       ======================================== */
    .current-status, 
    .timeline-container, 
    .participants-list, 
    .map-container {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 15px; 
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    /* ========================================
       CURRENT STATUS SECTION
       ======================================== */
    .current-status { 
      text-align: center; 
    }

    .status-grid { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); 
      gap: 15px; 
      margin-bottom: 20px; 
    }

    .status-item { 
      background: #f8f9fa; 
      padding: 15px; 
      border-radius: 10px; 
      border-left: 4px solid #667eea; 
    }

    .status-item h3 { 
      color: #667eea; 
      margin-bottom: 5px; 
      font-size: .9rem; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
    }

    .status-item .value { 
      font-size: 1.4rem; 
      font-weight: 600; 
      color: #333; 
    }

    /* ========================================
       TIMELINE SECTION
       ======================================== */
    .timeline-header { 
      justify-content: space-between; 
      align-items: center; 
      margin-bottom: 20px; 
      flex-wrap: wrap; 
      gap: 10px; 
    }

    .timeline-header h2 { 
      color: #333; 
      font-size: 1.5rem; 
      text-align: center; 
      margin-bottom: 20px;
    }

    /* Sits under the name/email/timezone row; reassures visitors about the email. */
    .email-privacy {
      max-width: 560px;
      margin: -8px auto 22px;
      text-align: center;
      font-size: .88rem;
      line-height: 1.5;
      color: #6b7280;
    }

    .email-privacy strong {
      color: #4b5563;
      font-weight: 600;
    }

    /* Live tally of taken vs still-open slots, under the timeline heading. */
    .slot-count {
      max-width: 420px;
      margin: -10px auto 22px;
      text-align: center;
    }

    .slot-count-text {
      font-size: 1.05rem;
      color: #444;
      margin-bottom: 8px;
    }

    .slot-count-text strong {
      color: #333;
      font-weight: 700;
    }

    .slot-count-sep {
      opacity: .45;
      margin: 0 6px;
    }

    .slot-count-bar {
      height: 8px;
      border-radius: 999px;
      background: #ececf3;
      overflow: hidden;
    }

    .slot-count-bar span {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: #667eea;
      transition: width .4s ease;
    }

    .user-info {
      display: flex;
      gap: 12px; 
      align-items: center; 
      flex-wrap: wrap; 
      justify-content: center; 
      margin-bottom: 20px; 
    }

    .user-input { 
      padding: 8px 12px; 
      border: 2px solid #e0e0e0; 
      border-radius: 8px; 
      font-size: 1rem; 
      background: white; 
    }

    .user-input:focus { 
      outline: none; 
      border-color: #667eea; 
    }

    .timezone-display { 
      background: #667EEA;
      color: white;
      padding: 8px 12px; 
      font-weight: 600;
      font-size: 14px!important;
      border-radius: 8px;
      border: none;
      cursor: pointer; 
    }

    .timezone-display:hover {
     // background: #333; 
      //color: white;
    }

    .whoami { 
      color: black; 
      opacity: .9; 
      font-size: .9rem; 
    }

    .instructions {
      text-align: center; 
      margin-top: 10px;
    }

    /* ========================================
       TIME SLOTS GRID
       ======================================== */
    .hours-grid { 
      display: none; 
    }

    .hour-label { 
      display: none; 
    }

    .slots-container { 
      max-height: 300px; 
      overflow-y: auto; 
      overflow-x: visible;
      border: 1px solid #e0e0e0; 
      border-radius: 8px; 
    }

    .slots-row { 
      display: grid; 
      grid-template-columns: 1fr; 
      gap: 2px;
      overflow: visible;
    }

    .hour-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1px;
      align-items: stretch;
      margin-bottom: 0px;
      overflow: visible;
    }

    /* ========================================
       TIME SLOT BASE STYLES
       ======================================== */
    .time-slot {
      aspect-ratio: 1; 
      min-height: 30px; 
      height: 100px; 
      width: 99%; 
      cursor: pointer; 
      transition: all .3s ease;
      display: flex; 
      align-items: center; 
      justify-content: center;
      font-size: .7rem; 
      font-weight: 600; 
      border: 1px solid rgba(51, 65, 85, 0.15);
      border-radius: 5px;
      position: relative;
      font-variant-numeric: tabular-nums; 
      line-height: 1;
    }

    .time-slot .mm { 
      opacity: .85; 
      font-size: .95rem; 
    }

    .time-slot:hover {
      z-index: 10; 
      border-color: rgba(51, 65, 85, 0.30); 
      box-shadow: 0 2px 10px rgba(0,0,0,.3); 
    }

    /* ========================================
       TIME SLOT STATES
       ======================================== */
    
    /* Available slot */
    .time-slot.available {  
      background: #FFFFFF; 
      color: #1a1a1a;  
    }

    /* Claimed slot */
    .time-slot.claimed { 
      background: #FFEBEE; 
      color: #C62828; 
    }

    /* Your slot */
    .time-slot.my-slot { 
      background: #D8FF9A; 
      color: #1a1a1a; 
    }

    /* Current active slot - with golden glow */
    @property --a {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

            .time-slot.current.my-slot::before {
        content: '💚';
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: 10px;
        }

    .time-slot.current { 
      background: linear-gradient(135deg, #FFD700 0%, #FFED4E 100%);
      color: #1a1a1a;
      font-weight: 500;
      animation: pulse 2s infinite, radiate 2s infinite, rotateBorder 3s linear infinite;
      position: relative;
      z-index: 100;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      border: 1px solid transparent;
      background-clip: padding-box;
      background-origin: border-box;
      background-image: 
        linear-gradient(135deg, #FFD700 0%, #FFED4E 100%),
        repeating-conic-gradient(
          from var(--a, 0deg),
          #FFD700 0%,
          #FFED4E 10%,
          #FFF9C4 20%,
          #FFFFFF 30%,
          #FFF9C4 40%,
          #FFED4E 50%,
          #FFD700 60%
        );
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
    }


    /* Outgoing slot - fades out the glow */
    .time-slot.current.leaving {
    animation: fadeOut 2s ease-out forwards;
    }

    /* Incoming slot - receives the light */
    .time-slot.current.arriving {
    animation: lightArrival 2s ease-out forwards;
    }

    @keyframes fadeOut {
    0% {
        box-shadow: 
        0 0 15px rgba(255, 215, 0, 1),
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 45px rgba(255, 215, 0, 0.6);
        opacity: 1;
        transform: scale(1);
    }
    100% {
        box-shadow: 
        0 0 5px rgba(255, 215, 0, 0.2),
        0 0 10px rgba(255, 215, 0, 0.1);
        opacity: 0.7;
        transform: scale(0.95);
    }
    }

    @keyframes lightArrival {
    0% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        opacity: 0.5;
        transform: scale(0.9);
    }
    50% {
        box-shadow: 
        0 0 30px rgba(255, 215, 0, 1.2),
        0 0 60px rgba(255, 215, 0, 0.9),
        0 0 90px rgba(255, 215, 0, 0.7);
        transform: scale(1.1);
    }
    100% {
        box-shadow: 
        0 0 15px rgba(255, 215, 0, 1),
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 45px rgba(255, 215, 0, 0.6);
        opacity: 1;
        transform: scale(1);
    }
    }

    /* Past available slot - with stripes */
    .time-slot.past.available, .time-slot.unavailable { 
      color: #333;
      background: 
        repeating-linear-gradient(
          135deg,
          #FFFFFF  0px,
          #FFFFFF  3px,
          rgba(156, 163, 175, 0.2) 3px,
          rgba(156, 163, 175, 0.2) 4px
        );
      opacity: .65; 
      pointer-events: none; 
    }

    /* Past claimed slot - with faded golden glow */
    .time-slot.past.claimed { 
        background-image: linear-gradient(135deg, #FFF9E6 0%, #FFEEB3 100%);
        color: #33333399;
        position: relative;
        z-index: 1;
        pointer-events: none;
        animation: residualWarmth 5s ease-in-out infinite;
        box-shadow: 0 0 6px rgba(255, 237, 78, 0.2);
        }

        @keyframes residualWarmth {
        0%, 100% { 
            box-shadow: 0 0 4px rgba(255, 237, 78, 0.15);
            filter: brightness(1);
        }
        50% { 
            box-shadow: 0 0 8px rgba(255, 237, 78, 0.25);
            filter: brightness(1.03);
        }
        }

    /* ========================================
       ANIMATIONS
       ======================================== */
    @keyframes pulse { 
      0% { opacity: 1; } 
      50% { opacity: 0.9; } 
      100% { opacity: 1; } 
    }

    @keyframes radiate {
      0% { 
        box-shadow: 
          0 0 10px rgba(255, 215, 0, 0.8),
          0 0 20px rgba(255, 215, 0, 0.5),
          0 0 30px rgba(255, 215, 0, 0.3);
      }
      50% { 
        box-shadow: 
          0 0 15px rgba(255, 215, 0, 1),
          0 0 30px rgba(255, 215, 0, 0.8),
          0 0 45px rgba(255, 215, 0, 0.6),
          0 0 60px rgba(255, 215, 0, 0.4);
      }
      100% { 
        box-shadow: 
          0 0 10px rgba(255, 215, 0, 0.8),
          0 0 20px rgba(255, 215, 0, 0.5),
          0 0 30px rgba(255, 215, 0, 0.3);
      }
    }

    @keyframes rotateBorder { 
      to { --a: 360deg; } 
    }

    @keyframes dotPulse { 
      0% { r: 6; opacity: 1; } 
      50% { r: 10; opacity: .7; } 
      100% { r: 6; opacity: 1; } 
    }

    /* ========================================
       LEGEND
       ======================================== */
    .legend { 
      display: flex; 
      justify-content: center; 
      gap: 20px; 
      margin-top: 15px; 
      flex-wrap: wrap; 
    }

    .legend-item { 
      display: flex; 
      align-items: center; 
      gap: 8px; 
      font-size: .9rem; 
    }

    .legend-color { 
      width: 20px; 
      height: 20px; 
      border-radius: 4px; 
    }

    /* ========================================
       MAP SECTION
       ======================================== */
    .map-container { 
      height: 400px; 
    }

    .map-header { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      margin-bottom: 20px; 
    }

    .map-header h2 { 
      color: #333; 
      font-size: 1.3rem; 
    }

    .total-participants { 
      background: #667eea; 
      color: white; 
      padding: 8px 15px; 
      border-radius: 20px; 
      font-size: .9rem; 
      font-weight: 600; 
    }

    .map-svg { 
      width: 100%; 
      height: 300px; 
      border-radius: 10px; 
      position: relative; 
      overflow: hidden; 
      background: radial-gradient(ellipse at center, #eaf3ff 0%, #cfe0ff 100%); 
    }

    .country { 
      fill: #99c2ff; 
      stroke: #5b86e5; 
      stroke-width: .5; 
    }

    .graticule { 
      fill: none; 
      stroke: rgba(0,0,0,.1); 
      stroke-width: .5; 
    }

    .participant-dot { 
      fill: #FF6B6B; 
      stroke: #fff; 
      stroke-width: 2; 
      cursor: pointer; 
      transition: all .3s ease; 
    }

    .participant-dot:hover { 
      fill: #FF5252; 
      r: 8; 
    }

    .participant-dot.pulsing { 
      animation: dotPulse 2s infinite; 
    }

    /* ========================================
       PARTICIPANTS LIST
       ======================================== */
    .participants-list { 
      max-height: 400px; 
      overflow-y: auto; 
    }

    .participants-list h3 { 
      color: #333; 
      margin-bottom: 15px; 
      font-size: 1.2rem; 
    }

    .participant-item { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      padding: 10px; 
      margin-bottom: 8px; 
      background: #f8f9fa; 
      border-radius: 8px; 
      transition: background .3s; 
    }

    .participant-item:hover { 
      background: #e9ecef; 
    }

    .participant-info { 
      display: flex; 
      align-items: center; 
      gap: 10px; 
    }

    .participant-flag { 
      width: 24px; 
      height: 18px; 
      border-radius: 3px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      font-size: .8rem; 
    }

    .participant-count { 
      background: #667eea; 
      color: white; 
      padding: 4px 8px; 
      border-radius: 12px; 
      font-size: .8rem; 
      font-weight: 600; 
    }

    /* ========================================
       TOOLTIP
       ======================================== */
    .tooltip { 
      position: absolute; 
      background: #333; 
      color: white; 
      padding: 8px 12px; 
      border-radius: 6px; 
      font-size: .8rem; 
      z-index: 1000; 
      pointer-events: none; 
      opacity: 0; 
      transition: opacity .3s; 
      white-space: nowrap; 
    }

    .tooltip.show { 
      opacity: 1; 
    }

    /* ========================================
       MODAL POPUP STYLES
       ======================================== */
    .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
    }

    .modal-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: slideIn 0.3s ease;
    }

    .modal-icon {
    font-size: 48px;
    margin-bottom: 15px;
    }

    .modal-title {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
    }

    .modal-message {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    white-space: pre-line;
    }

    .modal-button {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    }

    .modal-button:hover {
    background: #5568d3;
    }

    .modal-button.secondary {
    background: #f0f0f0;
    color: #333;
    margin-left: 10px;
    }

    .modal-button.secondary:hover {
    background: #e0e0e0;
    }

    @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
    }

    @keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
    }

    /* ========================================
       UTILITY CLASSES
       ======================================== */
    .hidden { 
      display: none !important; 
    }

    /* ========================================
       RESPONSIVE MOBILE STYLES
       ======================================== */
    @media (max-width: 1200px) { 
      .participants-row { 
        grid-template-columns: 1fr; 
      } 
    }

    @media (max-width: 768px) {
      .container { 
        padding: 20px; 
        width: 100%; 
        max-width: 100%; 
      }

      .header h1 { 
        font-size: 2rem; 
        padding: 0px 50px 0px 50px;
      }

      .status-grid { 
        grid-template-columns: 1fr; 
      }

      .hours-grid { 
        grid-template-columns: repeat(12, 1fr); 
      }

      .slots-row { 
        grid-template-columns: 1fr; 
      }

      .user-info { 
        justify-content: center; 
      }

      .hour-row { 
        grid-template-columns: repeat(3, 1fr); 
        margin-bottom: -1px; 
      }

      .hour-label { 
        font-size: .85rem; 
      }

      .timeline-header { 
        justify-content: center; 
      }

      .user-input, 
      .timezone-display {
        width: 90%; 
        text-align: center;
      }

      .map-header {
        display: block;
      }

      .map-header h2 {
        margin-bottom: 10px;
      }

      .map-container { 
        height: 450px;
      }

      .time-slot { 
        min-height: 30px; 
        height: auto; 
        width: 100%;
        aspect-ratio: 1;
      }

      .instructions {
        text-align: center;
      }

      .map-container, 
      .timeline-container,
      .participants-row, 
      .left-panel { 
        min-width: 0; 
      }
    }

    /* ========================================
       ADMIN (gear + modal)
       ======================================== */
    .admin-fab {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 9990;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      color: #4a3b6b;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
      transition: transform 0.25s ease, background 0.25s ease;
    }
    .admin-fab:hover {
      background: #fff;
      transform: rotate(45deg);
    }

    /* Sits below .modal-overlay (10000) so confirm/alert dialogs stack above it. */
    .admin-modal { z-index: 9998; }

    .admin-modal-content {
      text-align: left;
      max-width: 520px;
    }

    .admin-modal-close {
      position: absolute;
      top: 10px;
      right: 14px;
      border: 0;
      background: none;
      font-size: 28px;
      line-height: 1;
      color: #999;
      cursor: pointer;
    }
    .admin-modal-close:hover { color: #333; }

    .admin-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #888;
      margin-bottom: 8px;
    }

    .admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

    .admin-input {
      flex: 1 1 180px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 15px;
      font-family: inherit;
    }

    .admin-hint {
      font-size: 13px;
      color: #777;
      margin-top: 10px;
      min-height: 1.2em;
    }

    .admin-section {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid #eee;
    }

    .admin-link {
      border: 0;
      background: none;
      padding: 0;
      color: #667eea;
      font-size: 14px;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
    }

    .admin-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .admin-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 14px;
      background: #f7f7fa;
      border-radius: 8px;
      padding: 8px 12px;
    }
    .admin-list button {
      border: 0;
      background: none;
      color: #b3261e;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      text-decoration: underline;
    }

    .admin-status { font-size: 13px; margin-top: 16px; min-height: 1.2em; }