*, *::before, *::after{
	  box-sizing: border-box;
      }
      
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0; padding: 24px;}
    .card { max-width: 760px; margin: 0 auto; padding: 18px; border: 1px solid #ddd; border-radius: 12px; }

  
    .top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .pill { padding: 6px 10px; border: 1px solid #ddd; border-radius: 999px; font-size: 14px; }
    h1 { font-size: 18px; margin: 0 0 12px; }

    /* Bigger Arabic question*/
    .q{
      font-size: 38px;
      line-height: 1.3;
      /* direction: rtl; */
      margin: 10px 0 6px;
    }

    .hint { color: #666; margin: 0 0 14px; }

    /* Touch-friendly input */
    input { width: 100%; max-width:100%; padding: 12px; font-size: 18px; border: 1px solid #ccc; border-radius: 10px; }

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

    /* Touch-friendly buttons */
    button { padding: 12px 16px; font-size: 16px; border-radius: 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
    button.primary { border-color: #111; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }

    .msg { margin-top: 12px; padding: 10px; border-radius: 10px; display: none; }
    .ok { background: #e9fff0; border: 1px solid #b7f3c8; }
    .bad { background: #fff0f0; border: 1px solid #f3b7b7; }
    .footer { margin-top: 14px; color: #666; font-size: 14px; }
    .switch { display:flex; gap:10px; align-items:center; margin-top: 10px; flex-wrap: wrap; }
    select { padding: 10px; border-radius: 10px; border: 1px solid #ccc; }
    label.cb { display:flex; gap:8px; align-items:center; user-select:none; }
    input[type="checkbox"]{ width:auto; }
    .hidden { display: none !important; }

    /* mistake counter tag */
    .tag { display:none; font-weight:600; margin: 6px 0 0; }

    /* chapter multiselect dropdown */
    .chapWrap { position: relative; display: inline-block; }
    .chapBtn { padding: 10px 12px; border-radius: 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
    .chapMenu {
      position: absolute; top: calc(100% + 8px); left: 0;
      min-width: 240px; background: #fff; border: 1px solid #ddd;
      border-radius: 12px; padding: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      display: none; z-index: 10;
    }
    .chapMenu.open { display: block; }
    .chapItem { display:flex; gap:10px; align-items:center; padding: 6px 4px; }
    .chapHelp { font-size: 12px; color: #666; margin-top: 6px; }
    .chapActions { display:flex; gap:8px; margin-top: 10px; flex-wrap: wrap; }
    .mini { padding: 8px 10px; border-radius: 10px; }
    .chapList { max-height: 220px; overflow: auto; padding-right: 4px; }

    /* starred panel */
    .starGrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .starItem {
      border: 1px solid #eee;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }
    .starAr { font-size: 24px; line-height: 1.2; direction: rtl; }
    .starEn { color: #555; }
    .starRight { display:flex; gap:8px; align-items:center; flex-wrap: wrap; justify-content: flex-end; }
    .smallBtn { padding: 8px 10px; border-radius: 10px; }
    #editBtn,
#deleteBtn,
#starBtn {
display:none;
}