/* -------------------------
         Global Styles
         ------------------------- */
         body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            color:#000c;
            background-color: #f5f5f5;
          }
    
          /* -------------------------
             Navigation Bar Styles
             ------------------------- */
          .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 10px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 10px;
            align-items: center;
            z-index: 1000;
          }


          .nav-btn.emoji{
            padding: 4px 12px;
            font-size: 16px;
            font-weight: 500;
            margin-left:12px;
            margin-right:0;
          }

          .nav-btn{
            background: #1a1a1a;
            color: #f1f1f1;
            border: none;
            border-radius: 8px;
            font-weight: 400;
            font-size: 0.8em;
            padding: 7px 10px;
            box-shadow: -1px -1px 2px rgb(255 255 255 / 18%), 2px 2px 2px rgba(0, 0, 0, 0.5);
            transition: all 0.2s ease;
            cursor: pointer;
            margin-right: 12px;
            /* margin-right: 12px; */
          }

          .nav-btn.flat{
            box-shadow:none;
            border:1px solid #ccc2

          }

          .nav-btn:hover {
            background-color: #cccccc30;
          }
          .nav-btn.active {
            background-color: #eeeeee4d;
          }

          .navbar-header{
            align-self: center;
          }
          

          .navbar-title{
            font-weight: 500;
            font-size: 23px;
            color: rgb(255, 255, 255);
            margin-right: 1em;
            margin-top: -3px;
          }

          @media screen and (max-width:600px)  {
            .navbar-header{
              align-self: flex-start;
              margin-left: 6px;
              margin-bottom: 1px;
              flex-direction: column;
            }
            .navbar-title{
              align-self: flex-start;
              font-size:20px;
              margin-top:10px;
              margin-right:0;
            }

            .navbar-btn.emoji{
              font-size:14px;
            }
            .dash-right{
              align-self:flex-start;
              margin-top:5px;
              margin-left:-5px;
        
            }
          }
    
          /* -------------------------
             Toast Notification Styles
             ------------------------- */
          .toast {
            position: fixed;
            top: 70px; /* appears just below the navbar */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            z-index: 1100;
            font-size: 14px;
            cursor: pointer; /* click to dismiss */
          }
    
          /* -------------------------
             Main Container Styles
             ------------------------- */
          .container {
            max-width: 600px;
            margin: 20px auto 20px auto; /* leave room for navbar */
            padding: 20px;
            box-sizing: border-box;
          }
    
          /* -------------------------
             Question Card Styles
             ------------------------- */
          .question-card {
            background: #ffffff08;
            border: 1px solid #fff2;
            border-radius: 17px;
            padding:12.5px 16px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            cursor: pointer;
            /* padding-top: 13px; */
            /* padding-top: 13px; */
          }
          .question-text {
            font-weight: bold;
            /* margin-bottom: 5px; */
            font-size:17px;
            margin-right:10px;
          }

          .question-text.large{
            font-size:20px;

          }
          .answer-text {
            margin-bottom: 12px;
            margin-top: 12px;
            font-size: 15px;
            opacity: 0.8;
            border-top: 1px solid #ccc2;
            padding-top: 9px;
          }
    
          /* -------------------------
             Button Container & Button Styles
             ------------------------- */
          .button-container {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top:10px;
          }
          /* The check and X buttons stretch using flex: 1 */
          .btn {
            padding: 6px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            color: white;
            transition: box-shadow 0.2s ease, opacity 0.2s ease;
          }
          .btn-check {
            background-color: #28a745; /* green */
            flex: 1;
          }
          .btn-x {
            background-color: #dc3545; /* red */
            flex: 1;
          }
          /* Active feedback styling: active buttons glow */
          .active-feedback {
            box-shadow: 0 0 8px rgba(0,0,0,0.5),
                        0 0 8px rgba(40,167,69,0.7);
          }
          .btn-x.active-feedback {
            box-shadow: 0 0 8px rgba(0,0,0,0.5),
                        0 0 8px rgba(220,53,69,0.7);
          }
          /* Inactive feedback styling: buttons appear faded */
          .inactive-feedback {
            opacity: 0.4;
          }
          /* Trash can (delete) button: small and non-stretching */
          .btn-delete {
            background-color: #6c757d; /* gray */
            padding: 4px;
            font-size: 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
          }
    
          /* -------------------------
             Textarea for Add Mode
             ------------------------- */
          .add-textarea {
            width: 100%;
            background:#ddd;
            min-height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            background:#2a2a2a;
            box-sizing: border-box;
          }
    
          /* -------------------------
             Enter Button for Adding Questions
             ------------------------- */
          .enter-btn {
            margin-top: 10px;
            padding: 8px 16px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
          }