:root{
      --bg1: rgba(6, 24, 16, 0.70);
      --bg2: rgba(6, 24, 16, 0.82);
      --card: rgba(0,0,0,0.60);
      --line: rgba(255,255,255,0.10);

      /* Requested: light green / white boxes + light green border */
      --qaFill: rgba(235, 255, 240, 0.94);
      --qaBorder: rgba(120, 240, 160, 0.95);
      --qaText: #062012;

      --btn: #18a85b;
      --btn2:#0f7a41;
      --muted: rgba(255,255,255,0.72);
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:#fff;

      /* Background image with darker overlay */
      background-image:
        linear-gradient(var(--bg1), var(--bg2)),
        url("images/home/nasa1.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      min-height: 100vh;
    }

    .topbar{
      position: fixed;
      top: 14px;
      left: 14px;
      right: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      z-index: 50;
    }
    .topbar .left,
    .topbar .right{
      display:flex;
      gap:10px;
      align-items:center;
      pointer-events: auto;
    }

    .homeBtn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius: 999px;
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(120,240,160,0.35);
      color:#fff;
      text-decoration:none;
      font-weight: 600;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);
      cursor:pointer;
    }
    .homeBtn:hover{ border-color: rgba(120,240,160,0.75); }

    .wrap{
      max-width: 980px;
      margin: 0 auto;
      padding: 90px 16px 40px;
    }

    .card{
      background: var(--card);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    }

    .title{
      text-align:center;
      font-size: 40px;
      font-weight: 800;
      margin: 8px 0 18px;
      letter-spacing: 0.5px;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      max-width: 640px;
      margin: 0 auto;
    }

    /* Registration 2-column on desktop, 1-column on mobile */
    @media (max-width: 720px){
      .grid{ grid-template-columns: 1fr; }
    }

    label{
      font-size: 16px;
      font-weight: 650;
      color: rgba(255,255,255,0.92);
    }

    input, select, textarea{
      width: 100%;
      padding: 14px 14px;
      font-size: 16px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.92);
      color: #111;
      outline: none;
    }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(120,240,160,0.85);
      box-shadow: 0 0 0 3px rgba(120,240,160,0.25);
    }

    .btnRow{
      display:flex;
      justify-content:center;
      margin-top: 10px;
      gap: 12px;
    }

    .btn{
      border: 0;
      cursor:pointer;
      padding: 14px 22px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--btn), var(--btn2));
      color: #fff;
      font-weight: 800;
      font-size: 18px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    }
    .btn.secondary{
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.12);
      font-weight: 750;
    }

    /* Login button should look BLUE */
     #btnLogin{
       background: linear-gradient(180deg, #1e88e5, #1565c0) !important;
       border: 0 !important;
    }
     #btnLogin:disabled{
       opacity: 0.6;
    }

    .btn:disabled{ opacity: 0.6; cursor:not-allowed; }

    .muted{
      color: var(--muted);
      font-size: 14px;
      text-align:center;
      margin-top: 10px;
    }

    .errorLine{
      color: #ffd0d0;
      font-weight: 700;
      font-size: 14px;
      margin-top: -6px;
      display:none;
    }

    /* QA section */
    .qaHeader{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .chips{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap: wrap;
    }
    .chip{
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.92);
      font-weight: 650;
      font-size: 14px;
    }

    .sectionTitle{
      font-size: 22px;
      font-weight: 850;
      margin: 6px 0 10px;
    }

    /* Requested: light green / white input boxes with light green border */
    .qaInput, .qaBox, .qaStatus{
      background: var(--qaFill);
      border: 2px solid var(--qaBorder);
      color: var(--qaText);
      border-radius: 14px;
    }
    .qaInput{
      min-height: 110px;
      resize: vertical;
      font-size: 18px;
      line-height: 1.4;
    }
    .qaStatus{
      padding: 12px 14px;
      margin-top: 10px;
      font-weight: 650;
    }
    .qaBox{
      padding: 14px;
      min-height: 90px;
      font-size: 18px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .divider{
      height: 1px;
      background: var(--line);
      margin: 16px 0;
    }

    .hidden{ display:none !important; }

    @media (max-width: 560px){
      .title{ font-size: 30px; }
      .wrap{ padding-top: 86px; }
    }
  
/* === PATCH: Light Green Q/A Dialog === */
.card, .qa-card, #registrationBox, #qaBox {
  background: rgba(210,255,210,0.14) !important;
  border: 1px solid rgba(120,255,120,0.55) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}
.card input, .card textarea, .qa-card textarea, #qaBox textarea {
  background: rgba(238,255,238,0.96) !important;
  color:#0b2412 !important;
  border:1px solid rgba(120,255,120,0.75) !important;
}
.answer-box, #resultsBox {
  background: rgba(238,255,238,0.92) !important;
  border:1px solid rgba(120,255,120,0.75) !important;
  color:#0b2412 !important;
}
.result-item{
  background:#fff;
  border-left:5px solid #4caf50;
  padding:12px;
  border-radius:10px;
  margin:10px 0;
}
.kw {
    background: #fff3a0;
    font-weight: bold;
    padding: 0 2px;
}