body { margin: 0; padding: 0; background-color: #f4f7f6; font-family: 'Segoe UI', sans-serif; color: #333; display: flex; flex-direction: column; align-items: center; }
        nav { width: 100%; background-color: #333; padding: 15px 0; display: flex; justify-content: center; position: sticky; top: 0; z-index: 1000; }
        nav a { color: white; text-decoration: none; padding: 10px 20px; font-weight: bold; }
        
        .container { width: 95%; max-width: 800px; margin: 40px 0; display: flex; flex-direction: column; gap: 30px; }
        .card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        
        .section-title { border-bottom: 2px solid #4285f4; padding-bottom: 5px; margin: 30px 0 15px; color: #4285f4; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: 600; }
        input[type="text"] { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }

        /* Upload Area */
        .upload-area { border: 2px dashed #4285f4; padding: 40px; border-radius: 10px; cursor: pointer; text-align: center; transition: 0.3s; margin-bottom: 15px; }
        .upload-area:hover { background: #eef4ff; }
        #fileInput { display: none; }

        /* Radio Button Grid Styling */
        .question-block { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
        .radio-group { display: flex; justify-content: space-between; align-items: center; max-width: 450px; margin-top: 10px; }
        .radio-item { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; }
        .radio-item input { cursor: pointer; width: 18px; height: 18px; margin-bottom: 4px; }

        button { width: 100%; padding: 15px; background-color: #4285f4; color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: bold; cursor: pointer; margin-top: 10px; transition: 0.2s; }
        button:hover { background-color: #3367d6; }
        .secondary { background-color: #666; margin-top: 5px; }
        
        .hidden { display: none; }
        .status-msg { margin-top: 15px; font-weight: bold; text-align: center; }
        canvas { max-width: 100%; margin: 20px 0; }
        .chart-scroll-container {
              width: 100%;
              overflow-x: auto; /* Enables horizontal swiping on mobile */
              -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
              margin-bottom: 20px;
          }
          
          /* Force the canvas to have a minimum readable width on small screens */
          .chart-scroll-container canvas {
              min-width: 600px; /* Ensures the timeline never squishes smaller than this */
              width: 100%; /*!important;*/
              height: 300px; /*!important; /* Fixed height keeps it stable */
          }
          
          /* Optional: Add a subtle visual hint for mobile users that they can scroll */
          @media (max-width: 600px) {
              .chart-scroll-container {
                  border: 1px solid #e2e8f0;
                  border-radius: 6px;
                  padding: 5px;
                  background: #fafafa;
              }
          }
    .instruction-box {
    background-color: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 15px;
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #334155;
    text-align: left; /* Ensures instructions read cleanly even if container is centered */
    }
    
    .instruction-box ol {
        margin: 0;
        padding-left: 20px;
    }
    
    .instruction-box li {
        margin-bottom: 10px;
    }
    
    .instruction-box li:last-child {
        margin-bottom: 0;
    }
@media (max-width: 600px) {
    .instruction-grid {
        grid-template-columns: 1fr; /*!important; /* Forces a single column on phone screens */
        gap: 12px;/* !important;*/
    }
}