:root{
      --bg1: #f3fff5;     /* very light soft green */
      --bg2: #cfeedd;     /* soft green */
      --card: rgba(255,255,255,.78);
      --card2: rgba(255,255,255,.62);
      --text: #14321e;
      --muted: #3a5a45;
      --accent: #1f7a46;
      --accent2:#0f5a32;
      --danger:#b42318;
      --ok:#0b7a3b;
      --shadow: 0 10px 25px rgba(0,0,0,.10);
      --radius: 18px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      min-height:100vh;
      background: linear-gradient(to bottom, var(--bg1), var(--bg2));
  
      justify-content:center;
      padding:18px 12px 28px;
    }

    .wrap{ width:min(980px, 100%); 
        margin-left: auto;
        margin-right: auto;
    }
    

    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px;
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
    }

  .header{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; box-shadow:0 2px 10px rgba(0,0,0,.04);
  }

    .leftHead{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 0;
    }

    .logo{
      width:80px; height:60px;
      object-fit:cover;
      background:#fff;
      box-shadow: 0 6px 14px rgba(0,0,0,.08);
    }

    .titleBlock{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .title{
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .3px;
      margin:0;
      line-height:1.1;
    }
    .subtitle{
      margin:2px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      color: green;
      text-overflow:ellipsis;
    }

    .avatar{
      width:55px; height:55px;
      border-radius:999px;
      background: rgba(31,122,70,.12);
      display:grid;
      place-items:center;
      overflow:hidden;
      border: 2px solid rgba(31,122,70,.25);
      flex: 0 0 auto;
    }
    .avatar img{
      width:100%; height:100%;
      object-fit:cover;
      display:block;
    }
    .avatar .fallback{
      font-weight:800;
      color: var(--accent2);
    }

    main{
      margin-top:14px;
      background: var(--card2);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
      backdrop-filter: blur(6px);
    }

    .topRow{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .pill{
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(31,122,70,.18);
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 700;
      color: var(--accent2);
      box-shadow: 0 6px 14px rgba(0,0,0,.06);
    }
    .pill span{ color: var(--text); font-weight: 800; }

    .questionCard{
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(31,122,70,.15);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 10px 22px rgba(0,0,0,.07);
    }

    .qText{
      font-size: 18px;
      line-height: 1;
      margin: 0 0 12px 0;
      font-weight: 600;
    }

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

    input[type="text"]{
      flex: 1 1 320px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(20,50,30,.22);
      outline: none;
      font-size: 16px;
      background: rgba(255,255,255,.95);
    }
    input[type="text"]:focus{
      border-color: rgba(31,122,70,.55);
      box-shadow: 0 0 0 3px rgba(31,122,70,.18);
    }

    .btnRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 12px;
    }

    button{
      border: 0;
      padding: 10px 12px;
      border-radius: 14px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(0,0,0,.25);
      transition: transform .05s ease, opacity .15s ease;
      user-select:none;
    }
    button:active{ transform: translateY(1px); }
    button:disabled{
      opacity: .55;
      cursor: not-allowed;
      box-shadow:none;
    }
    button:hover{
        transform: scale(1.1);
    }

    .btnPrimary{
      background: linear-gradient(to bottom, #28a05b, #1c7f45);
      color: white;
    }
    .btnSecondary{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(31,122,70,.25);
      color: var(--accent2);
    }

    .feedback{
      margin-top: 10px;
      font-weight: 500;
      min-height: 22px;
    }
    .feedback.ok{ color: var(--ok); }
    .feedback.bad{ color: var(--danger); }
    .feedback.info{ color: var(--muted); }

    .hintLine{
      margin-top: 6px;
      color: var(--muted);
      font-weight: 400;
      font-size: 16px;
    }

    .footerNav{
      margin-top: 14px;
      border: 1px color white;
      display:flex;
      justify-content:center;
    }
    .footer.link{
        border: 1px color white;
    }
    .homelink{
      width:45px; height:45px;
      border-radius: 999px;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(31,122,70,.18);
      display:grid;
      place-items:center;
      text-decoration:none;
      color: var(--accent2);
      box-shadow:  0 10px 25px rgba(0,0,0,.30);
      font-size: 24px;
      transition: transform 0.3s ease; /* Smooth transition */
    }
.homelink:hover{
    transform: scale(1.1); 
}
    .menu{
      width:45px; height:45px;
      padding: 8px;
      border: 1px solid white ;
      border-radius: 999px;
      justify-content: center;
      background: rgba(255,255,255,.50);
      box-shadow: var(--shadow);
      font-size: 20px;
      text-align: center;
    }

    
    .lbl {
        font-weight: 800;     /* bold labels */
    }

    .val {
        font-weight: 400;     /* plain words */
    }

    .cat {
        font-weight: 400;
        opacity: 0.8;
    }


    /* Small screen tweaks */
    @media (max-width: 520px){
      .qText{ font-size: 17px; }
      button{ width: 100%; }
      .btnRow{ flex-direction:column; }
    }

    /* Optional: hide the original text visually (audio-only mode) */
    .srOnly{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      border:0;
    }