.cpv2-app, .cpv2-app * { box-sizing: border-box; font-family: "Times New Roman", Times, serif !important; }
.cpv2-app {
  --cp-viewport-h: 100dvh;
  position:relative;
  width: 100%; max-width: 980px; margin: 0 auto; background: var(--cp-app-bg); color: #111827;
  border: 1px solid var(--cp-border); border-radius: 18px; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-height: 720px;
  box-shadow:none;
}
.cpv2-header { background: var(--cp-header-bg); color: var(--cp-header-text); padding: 10px 12px 8px; border-bottom: 1px solid var(--cp-border); }
.cpv2-title { text-align:center; font-size: clamp(22px,4.5vw,34px); font-weight:700; line-height:1.1; margin-bottom:8px; }
.cpv2-tabs { display:grid; grid-template-columns: repeat(3,1fr); gap:6px; }
.cpv2-tab { border:1px solid var(--cp-border); background-color:var(--cp-tab-bg); color:var(--cp-tab-text); font-weight:700; min-height:38px; border-radius:10px; padding:6px 8px; font-size:clamp(14px,3.4vw,18px); }
.cpv2-tab.is-active { background-color:var(--cp-tab-active-bg); color:var(--cp-tab-active-text); }
.cpv2-main { min-height:0; overflow:auto; padding:10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.cpv2-footer { background:var(--cp-card-bg); border-top:1px solid var(--cp-border); padding:8px 10px max(8px, env(safe-area-inset-bottom)); display:grid; gap:7px; }
.cpv2-card { background:var(--cp-card-bg); border:1px solid var(--cp-border); border-radius:14px; padding:10px; }
.cpv2-center { text-align:center; }
.cpv2-screen-heading { margin:2px 0 10px; font-size:clamp(20px,4.8vw,30px); line-height:1.1; }
.cpv2-field { display:grid; gap:5px; margin:10px 0; }
.cpv2-field label { font-size:clamp(16px,3.8vw,20px); font-weight:700; }
.cpv2-select, .cpv2-input { width:100%; min-height:42px; border:1px solid var(--cp-border); border-radius:10px; padding:7px 9px; background:#fff; font-size:clamp(16px,3.7vw,19px); }
.cpv2-select:disabled { opacity:.6; }

/* Clearly mark the currently selected Part without using a glow effect. */
.cpv2-select.cpv2-part-selected {
  border:2px solid var(--cp-tab-active-bg);
  font-weight:700;
}
.cpv2-btn { border:0; border-radius:10px; min-height:42px; padding:7px 10px; font-size:clamp(15px,3.5vw,18px); font-weight:700; cursor:pointer; }
.cpv2-btn-primary { background-color:var(--cp-primary-bg); color:var(--cp-primary-text); }
.cpv2-btn-danger { background-color:var(--cp-danger-bg); color:var(--cp-danger-text); }
.cpv2-btn-muted { background-color:#d8dbe0; color:#111827; }
.cpv2-btn:disabled { opacity:.48; cursor:not-allowed; }
.cpv2-footer-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; }
.cpv2-footer-row.one { grid-template-columns:1fr; }
.cpv2-score { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:8px; position:sticky; top:0; z-index:4; background:var(--cp-app-bg); padding-bottom:4px; }
.cpv2-score-box { background:var(--cp-card-bg); border:1px solid var(--cp-border); border-radius:9px; padding:5px 3px; text-align:center; min-width:0; }
.cpv2-score-label { display:block; font-size:clamp(10px,2.8vw,13px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpv2-score-value { display:block; font-size:clamp(15px,3.7vw,19px); font-weight:700; }
.cpv2-score-box.correct { color:var(--cp-correct); }.cpv2-score-box.wrong{color:var(--cp-wrong)}.cpv2-score-box.skipped{color:var(--cp-skipped)}
.cpv2-part-title { font-size:clamp(18px,4.3vw,25px); font-weight:700; text-align:center; margin:2px 0 8px; }
.cpv2-learn-table { width:100%; border-collapse:collapse; table-layout:fixed; background:var(--cp-card-bg); }
.cpv2-learn-table col { width:50%; }
.cpv2-learn-table td { width:50% !important; border:1px solid var(--cp-border); padding:5px 6px !important; height:auto !important; min-height:0 !important; vertical-align:middle; font-size:clamp(17px,4vw,21px); line-height:1.22; overflow-wrap:anywhere; }
.cpv2-prompt { border:1px solid var(--cp-border); border-radius:12px; padding:8px; margin-bottom:8px; }
.cpv2-prompt.question { background:var(--cp-question-bg); }.cpv2-prompt.answer{background:var(--cp-answer-bg)}
.cpv2-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.cpv2-prompt-title { font-weight:700; font-size:clamp(17px,4vw,21px); }
.cpv2-tts-btn, .cpv2-mic-btn { border:1px solid var(--cp-border); background-color:#eef0f3; border-radius:9px; min-width:40px; min-height:36px; font-size:18px; }
.cpv2-telugu { font-size:clamp(17px,4vw,21px); line-height:1.2; margin-bottom:7px; }
.cpv2-built { min-height:42px; border:1px dashed var(--cp-border); border-radius:9px; padding:5px; display:flex; gap:5px; flex-wrap:wrap; align-content:flex-start; margin-bottom:6px; background:#fff; }
.cpv2-pool { display:flex; gap:5px; flex-wrap:wrap; }
.cpv2-tile { border:1px solid var(--cp-border); background-color:var(--cp-tile-bg); color:var(--cp-tile-text); border-radius:8px; min-height:32px; padding:3px 7px; font-size:clamp(14px,3.45vw,18px); line-height:1.05; font-weight:700; }
.cpv2-tile.selected { background-color:var(--cp-tile-selected-bg); }
.cpv2-instruction { font-size:clamp(14px,3.4vw,17px); margin:2px 0 8px; text-align:center; }
.cpv2-translation-grid { display:grid; gap:8px; }
.cpv2-translation-box { background:var(--cp-card-bg); border:1px solid var(--cp-border); border-radius:12px; padding:8px; }
.cpv2-translation-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cpv2-textarea { width:100%; min-height:72px; resize:vertical; border:1px solid var(--cp-border); border-radius:9px; padding:7px; margin-top:6px; font-size:clamp(16px,3.7vw,19px); line-height:1.25; }
.cpv2-feedback { text-align:center; font-size:clamp(18px,4vw,24px); font-weight:700; margin:8px 0; }
.cpv2-results-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0; }
.cpv2-result-card { border:1px solid var(--cp-border); border-radius:12px; background:var(--cp-card-bg); padding:12px 8px; text-align:center; }
.cpv2-result-card strong { font-size:clamp(24px,7vw,40px); display:block; }
.cpv2-loading, .cpv2-error { padding:20px; text-align:center; font-size:18px; }
.cpv2-error { color:#b91c1c; }


/* Flat, clean button treatment: no gloss, glow, gradient or reflective shadow.
   Configurable base colors are preserved for primary/danger/tab/tile controls. */
.cpv2-app button {
  background-image:none !important;
  border-color:#b8bec7;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none;
  transition:background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.cpv2-app button:active:not(:disabled) {
  filter:brightness(.92);
}
.cpv2-app button:disabled {
  filter:none;
  opacity:.48;
}

@media (max-width: 768px) {
  html.cpv2-lock, body.cpv2-lock { overflow:hidden !important; overscroll-behavior:none; }
  .cpv2-app {
    position:fixed; inset:0; z-index:2147483000; width:100vw; max-width:none; margin:0; border:0; border-radius:0;
    height:var(--cp-viewport-h, 100dvh); min-height:0; max-height:var(--cp-viewport-h, 100dvh);
    padding-top:env(safe-area-inset-top); overflow:hidden; box-shadow:none;
  }
  .cpv2-header { padding:6px 8px 5px; }
  .cpv2-title { margin-bottom:5px; font-size:clamp(20px,6vw,28px); }
  .cpv2-tab { min-height:34px; padding:4px 5px; }
  .cpv2-main { padding:7px; }
  .cpv2-footer { padding:6px 7px max(6px, env(safe-area-inset-bottom)); }
  .cpv2-btn { min-height:38px; padding:5px 7px; }
  .cpv2-card { padding:8px; }
  .cpv2-learn-table td { padding:4px 5px !important; }
  .cpv2-prompt { padding:6px; margin-bottom:6px; }
  .cpv2-built { min-height:38px; }
  .cpv2-tile { min-height:29px; padding:3px 6px; }
}

@media (max-width: 390px), (max-height: 700px) {
  .cpv2-title { font-size:20px; }
  .cpv2-tab { font-size:13px; min-height:31px; }
  .cpv2-score-label { font-size:9px; }
  .cpv2-score-value { font-size:14px; }
  .cpv2-learn-table td { font-size:16px; line-height:1.18; padding:4px 5px !important; }
  .cpv2-telugu { font-size:16px; }
  .cpv2-tile { font-size:13px; min-height:27px; font-weight:700; }
  .cpv2-btn { min-height:35px; font-size:14px; }
}

/* Translation confirmation flow */
.cpv2-translation-actions { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.cpv2-confirm-btn {
  border:1px solid var(--cp-border);
  background-color:#d8dbe0;
  color:#111827;
  border-radius:9px;
  min-height:36px;
  padding:5px 10px;
  font-size:clamp(13px,3.2vw,16px);
  font-weight:700;
  white-space:nowrap;
}
.cpv2-confirm-btn.is-confirmed { background-color:var(--cp-primary-bg); color:var(--cp-primary-text); }
.cpv2-confirm-message {
  border:1px solid #ef4444;
  background:#fff1f2;
  color:#b91c1c;
  border-radius:10px;
  padding:7px 9px;
  margin:0 0 8px;
  text-align:center;
  font-size:clamp(14px,3.4vw,17px);
  font-weight:700;
  line-height:1.2;
}
.cpv2-confirm-message[hidden] { display:none !important; }
.cpv2-textarea:disabled { background:#f3f4f6; opacity:.72; }

@media (max-width:390px), (max-height:700px) {
  .cpv2-translation-actions { gap:4px; }
  .cpv2-confirm-btn { min-height:32px; padding:4px 7px; font-size:12px; }
  .cpv2-mic-btn { min-width:36px; min-height:32px; }
}


/* Selection screen: actions live in the open space under Topic/Part, not in the bottom footer. */
.cpv2-selection-card { max-width:760px; margin:0 auto; }
.cpv2-selection-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:clamp(34px,7vh,76px);
}
.cpv2-selection-actions [data-exit] { grid-column:1; }
.cpv2-selection-actions [data-start] { grid-column:2; }

/* Exit confirmation */
.cpv2-exit-confirm {
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(17,24,39,.42);
}
.cpv2-exit-confirm-card {
  width:min(420px,100%);
  background:var(--cp-card-bg);
  border:1px solid var(--cp-border);
  border-radius:16px;
  padding:18px;
  box-shadow:none;
  text-align:center;
}
.cpv2-exit-confirm-message {
  font-size:clamp(20px,5vw,28px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:16px;
}
.cpv2-exit-confirm-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media (max-width:768px) {
  .cpv2-selection-card { width:100%; }
  .cpv2-selection-card { height:100%; min-height:100%; display:flex; flex-direction:column; }
  .cpv2-selection-actions { margin-top:auto; padding-top:clamp(34px,7vh,72px); flex:0 0 auto; }
  .cpv2-exit-confirm { position:fixed; }
}


/* Pronunciation-in-Telugu preference on the Select Topic screen */
.cpv2-pronunciation-setting {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  margin:clamp(16px,3vh,26px) 0 10px;
  background:var(--cp-card-bg);
  border:1px solid var(--cp-border);
  border-radius:11px;
}
.cpv2-pronunciation-label {
  min-width:0;
  font-size:clamp(15px,3.6vw,19px);
  line-height:1.15;
  font-weight:700;
}
.cpv2-pronunciation-status {
  min-width:34px;
  text-align:right;
  font-size:clamp(13px,3.1vw,16px);
  font-weight:700;
}
.cpv2-switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.cpv2-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.cpv2-switch-track {
  width:48px;
  height:27px;
  padding:2px;
  border:1px solid var(--cp-border);
  border-radius:999px;
  background:#d8dbe0;
  display:flex;
  align-items:center;
  transition:background-color .15s ease;
}
.cpv2-switch-thumb {
  display:block;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  border:1px solid #aeb4bd;
  transform:translateX(0);
  transition:transform .15s ease;
}
.cpv2-switch input:checked + .cpv2-switch-track { background:var(--cp-primary-bg); }
.cpv2-switch input:checked + .cpv2-switch-track .cpv2-switch-thumb { transform:translateX(20px); }
.cpv2-switch input:focus-visible + .cpv2-switch-track { outline:2px solid var(--cp-tab-active-bg); outline-offset:2px; }
.cpv2-pronunciation-row td { font-style:normal; }
.cpv2-learn-table .cpv2-blank-row td {
  width:100% !important;
  height:10px !important;
  min-height:10px !important;
  padding:0 !important;
  line-height:0 !important;
  background:var(--cp-card-bg);
}

@media (max-width:390px) {
  .cpv2-pronunciation-setting { gap:6px; padding:7px 8px; margin-top:14px; }
  .cpv2-switch-track { width:44px; height:25px; }
  .cpv2-switch-thumb { width:19px; height:19px; }
  .cpv2-switch input:checked + .cpv2-switch-track .cpv2-switch-thumb { transform:translateX(18px); }
}