:root {

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;



  /* Aptech Brand Colors */

  --aptech-red: #A51C24;

  --aptech-red-dark: #7A141A;

  --aptech-red-light: #FDF2F2;

  --aptech-red-border: #F87171;



  /* Theme tokens (Light by default) */

  --bg-app: #F8FAFC;

  --bg-surface: #FFFFFF;

  --bg-muted: #F1F5F9;

  --bg-card-hover: #F8FAFC;

  

  --text-main: #0F172A;

  --text-secondary: #475569;

  --text-muted: #64748B;

  

  --border-color: #E2E8F0;

  --border-strong: #CBD5E1;



  /* Semantic Feedback Colors */

  --color-correct: #10B981;

  --color-correct-bg: #ECFDF5;

  --color-correct-border: #059669;

  --color-correct-text: #064E3B;



  --color-wrong: #EF4444;

  --color-wrong-bg: #FEF2F2;

  --color-wrong-border: #DC2626;

  --color-wrong-text: #7F1D1D;



  --color-flag: #F59E0B;

  --color-flag-bg: #FFFBEB;

  --color-flag-border: #D97706;



  --color-accent: #2563EB;

  --color-accent-bg: #EFF6FF;



  --radius-sm: 6px;

  --radius-md: 10px;

  --radius-lg: 14px;

  --radius-full: 9999px;



  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);



  --tap-min: 48px;

}



[data-theme="dark"] {

  --bg-app: #0F172A;

  --bg-surface: #1E293B;

  --bg-muted: #334155;

  --bg-card-hover: #243248;



  --text-main: #F8FAFC;

  --text-secondary: #CBD5E1;

  --text-muted: #94A3B8;



  --border-color: #334155;

  --border-strong: #475569;



  --aptech-red-light: #2A1215;

  --color-correct-bg: #064E3B;

  --color-correct-text: #6EE7B7;

  --color-wrong-bg: #450A0A;

  --color-wrong-text: #FCA5A5;

  --color-flag-bg: #451A03;

  --color-accent-bg: #1E3A8A;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  -webkit-tap-highlight-color: transparent;

}



body {

  font-family: var(--font-sans);

  background-color: var(--bg-app);

  color: var(--text-main);

  line-height: 1.5;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  overflow-x: hidden;

  overflow-wrap: break-word;

}



/* App Header */

.app-top-nav {

  background: var(--bg-surface);

  border-bottom: 1px solid var(--border-color);

  padding: 0.65rem 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: sticky;

  top: 0;

  z-index: 100;

  box-shadow: var(--shadow-sm);

}



.nav-brand-group {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  cursor: pointer;

}



.brand-badge {

  background: var(--aptech-red);

  color: #FFFFFF;

  font-weight: 800;

  font-size: 0.85rem;

  padding: 0.2rem 0.5rem;

  border-radius: var(--radius-sm);

  letter-spacing: 0.05em;

}



.nav-title {

  font-size: 1rem;

  font-weight: 700;

  color: var(--text-main);

}



.nav-actions {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.icon-btn {

  background: transparent;

  border: 1px solid var(--border-color);

  color: var(--text-secondary);

  border-radius: var(--radius-sm);

  min-width: 38px;

  min-height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 1.1rem;

  transition: all 0.15s ease;

}



.icon-btn:hover {

  background: var(--bg-muted);

  color: var(--text-main);

}



/* Container Views */

.view-container {

  display: none;

  flex: 1;

  width: 100%;

}



.view-container.active {

  display: flex;

  flex-direction: column;

}



/* ========================================================

   VIEW 1: CATALOG / BROWSER

   ======================================================== */

.catalog-content {

  max-width: 1100px;

  margin: 0 auto;

  width: 100%;

  padding: 1.25rem 1rem 3rem 1rem;

}



.catalog-hero {

  background: linear-gradient(135deg, var(--aptech-red) 0%, var(--aptech-red-dark) 100%);

  color: #FFFFFF;

  border-radius: var(--radius-lg);

  padding: 1.75rem 1.5rem;

  margin-bottom: 1.5rem;

  box-shadow: var(--shadow-md);

}



.catalog-hero h1 {

  font-size: 1.5rem;

  font-weight: 800;

  margin-bottom: 0.4rem;

}



.catalog-hero p {

  font-size: 0.95rem;

  opacity: 0.9;

  line-height: 1.4;

}



.catalog-mode-pills {

  display: flex;

  gap: 0.75rem;

  margin-top: 1rem;

  flex-wrap: wrap;

}



.mode-pill-badge {

  background: rgba(255, 255, 255, 0.18);

  border: 1px solid rgba(255, 255, 255, 0.3);

  color: #FFFFFF;

  font-size: 0.8rem;

  font-weight: 600;

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

}



/* Search and Filters */

.search-filter-wrap {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin-bottom: 1.5rem;

}



.search-box {

  position: relative;

  width: 100%;

}



.search-input {

  width: 100%;

  padding: 0.75rem 1rem 0.75rem 2.6rem;

  border: 1px solid var(--border-color);

  background: var(--bg-surface);

  color: var(--text-main);

  border-radius: var(--radius-md);

  font-size: 0.95rem;

  outline: none;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.search-input:focus {

  border-color: var(--aptech-red);

  box-shadow: 0 0 0 3px rgba(165, 28, 36, 0.12);

}



.search-icon-svg {

  position: absolute;

  left: 0.85rem;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-muted);

  width: 18px;

  height: 18px;

  pointer-events: none;

}



.semester-chips {

  display: flex;

  gap: 0.5rem;

  overflow-x: auto;

  padding-bottom: 0.25rem;

  scrollbar-width: none;

}

.semester-chips::-webkit-scrollbar {

  display: none;

}



.sem-chip {

  padding: 0.45rem 0.95rem;

  border-radius: var(--radius-full);

  font-size: 0.85rem;

  font-weight: 600;

  border: 1px solid var(--border-color);

  background: var(--bg-surface);

  color: var(--text-secondary);

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.15s ease;

}



.sem-chip.active {

  background: var(--aptech-red);

  color: #FFFFFF;

  border-color: var(--aptech-red);

  box-shadow: 0 2px 5px rgba(165, 28, 36, 0.25);

}



/* Subjects Grid */

.subjects-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 1rem;

}



.subject-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 1.15rem;

  cursor: pointer;

  transition: all 0.15s ease;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  box-shadow: var(--shadow-sm);

}



.subject-card:hover {

  transform: translateY(-2px);

  border-color: var(--aptech-red);

  box-shadow: var(--shadow-md);

}



.subject-card-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 0.6rem;

}



.sem-tag {

  font-size: 0.75rem;

  font-weight: 700;

  background: var(--bg-muted);

  color: var(--text-secondary);

  padding: 0.15rem 0.5rem;

  border-radius: var(--radius-sm);

}



.sample-count-badge {

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--aptech-red);

  background: var(--aptech-red-light);

  padding: 0.15rem 0.55rem;

  border-radius: var(--radius-full);

}



.subject-title {

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.35;

  margin-bottom: 0.5rem;

}



.subject-actions-hint {

  font-size: 0.8rem;

  color: var(--text-muted);

  display: flex;

  align-items: center;

  gap: 0.35rem;

  font-weight: 500;

  margin-top: 0.5rem;

}



/* ========================================================

   MODAL / BOTTOM SHEET FOR EXAM & MODE PICKER

   ======================================================== */

.modal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(2px);

  z-index: 200;

  align-items: flex-end;

  justify-content: center;

}



.modal-overlay.open {

  display: flex;

}



.modal-bottom-sheet {

  background: var(--bg-surface);

  border-top-left-radius: var(--radius-lg);

  border-top-right-radius: var(--radius-lg);

  width: 100%;

  max-width: 600px;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  animation: slideUp 0.25s ease-out;

  border: 1px solid var(--border-color);

}



@keyframes slideUp {

  from { transform: translateY(100%); }

  to { transform: translateY(0); }

}



.sheet-header {

  padding: 1.25rem 1.25rem 0.75rem 1.25rem;

  border-bottom: 1px solid var(--border-color);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.sheet-header h3 {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--text-main);

}



.sheet-body {

  padding: 1.25rem;

  overflow-y: auto;

}



.sample-selector-group {

  margin-bottom: 1.25rem;

}



.section-label {

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--text-secondary);

  margin-bottom: 0.5rem;

  display: block;

}



.sample-pills-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.sample-pill-btn {

  padding: 0.45rem 0.85rem;

  border: 1px solid var(--border-color);

  background: var(--bg-muted);

  color: var(--text-main);

  border-radius: var(--radius-sm);

  font-size: 0.85rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.15s ease;

}



.sample-pill-btn.selected {

  background: var(--aptech-red);

  color: #FFFFFF;

  border-color: var(--aptech-red);

}



.mode-cards-grid {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.mode-select-card {

  border: 2px solid var(--border-color);

  background: var(--bg-surface);

  border-radius: var(--radius-md);

  padding: 1rem;

  cursor: pointer;

  display: flex;

  align-items: flex-start;

  gap: 0.85rem;

  transition: all 0.15s ease;

}



.mode-select-card:hover {

  border-color: var(--aptech-red);

  background: var(--bg-card-hover);

}



.mode-card-icon {

  font-size: 1.6rem;

  line-height: 1;

}



.mode-card-info h4 {

  font-size: 1rem;

  font-weight: 700;

  color: var(--text-main);

  margin-bottom: 0.2rem;

}



.mode-card-info p {

  font-size: 0.85rem;

  color: var(--text-secondary);

  line-height: 1.35;

}



/* ========================================================

   VIEW 2: MODE 1 - APTECH EXAM PORTAL

   ======================================================== */

.portal-runner-wrap {

  display: flex;

  flex-direction: column;

  min-height: calc(100vh - 60px);

  background: var(--bg-surface);

}



.portal-top-redbar {

  background-color: var(--aptech-red);

  color: #FFFFFF;

  padding: 0.65rem 1rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.75rem;

  box-shadow: var(--shadow-sm);

}



.cand-meta {

  display: flex;

  flex-direction: column;

}



.cand-name-code {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  font-weight: 700;

  font-size: 0.95rem;

}



.code-badge {

  background: rgba(0, 0, 0, 0.25);

  padding: 0.15rem 0.5rem;

  border-radius: var(--radius-sm);

  font-family: var(--font-mono);

  font-weight: 800;

  font-size: 0.8rem;

  letter-spacing: 0.05em;

}



.cand-submeta {

  font-size: 0.75rem;

  opacity: 0.9;

  font-weight: 500;

}



.exam-status-strip {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.timer-box {

  background: #FFFFFF;

  color: var(--aptech-red);

  font-family: var(--font-mono);

  font-size: 1.15rem;

  font-weight: 800;

  padding: 0.25rem 0.75rem;

  border-radius: var(--radius-sm);

  letter-spacing: 0.05em;

  min-width: 80px;

  text-align: center;

  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);

}



.timer-box.timer-urgent {

  background: #FEF2F2;

  color: #DC2626;

  border: 1px solid #DC2626;

  animation: pulse 1s infinite;

}



@keyframes pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.5; }

}



.portal-subheader-bar {

  background: var(--aptech-red-dark);

  color: #FFFFFF;

  padding: 0.4rem 1rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.82rem;

  font-weight: 700;

}



.portal-main-layout {

  display: flex;

  flex: 1;

  position: relative;

  overflow: hidden;

}



.portal-question-area {

  flex: 1;

  padding: 1.5rem 1rem 6rem 1rem;

  max-width: 900px;

  margin: 0 auto;

  width: 100%;

  overflow-y: auto;

}



.q-meta-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0.85rem;

  border-bottom: 1px dashed var(--border-color);

  padding-bottom: 0.5rem;

}



.q-number-title {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--aptech-red);

}



.q-marks-badge {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--text-muted);

  background: var(--bg-muted);

  padding: 0.15rem 0.5rem;

  border-radius: var(--radius-sm);

}



.q-prompt-text {

  font-size: 1.05rem;

  color: var(--text-main);

  line-height: 1.6;

  font-weight: 600;

  margin-bottom: 1.5rem;

  overflow-wrap: anywhere;

  word-break: break-word;

}



.q-prompt-text pre, .q-prompt-text code {

  font-family: var(--font-mono);

  background: var(--bg-muted);

  padding: 0.2rem 0.4rem;

  border-radius: 4px;

  font-size: 0.9em;

}



.options-container {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin-bottom: 2rem;

}



.option-card-label {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  min-height: var(--tap-min);

  padding: 0.75rem 1rem;

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: all 0.15s ease;

  user-select: none;

  font-size: 0.95rem;

  color: var(--text-main);

  width: 100%;

  box-sizing: border-box;

}



.option-card-label:hover {

  background: var(--bg-card-hover);

  border-color: var(--aptech-red);

}



.option-card-label.selected {

  background: var(--aptech-red-light);

  border-color: var(--aptech-red);

  box-shadow: 0 0 0 1px var(--aptech-red);

  font-weight: 600;

}



.option-input-ctrl {

  width: 20px;

  height: 20px;

  accent-color: var(--aptech-red);

  flex: 0 0 20px;

  flex-shrink: 0;

  pointer-events: none;

}



.option-card-text {

  flex: 1 1 auto;

  min-width: 0;

  overflow-wrap: anywhere;

  word-break: break-word;

  line-height: 1.45;

}



/* Bottom Action Bar for Portal */

.portal-bottom-bar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  background: var(--bg-surface);

  border-top: 1px solid var(--border-color);

  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) 1rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 0.5rem;

  z-index: 90;

  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);

}



.btn-nav-action {

  min-height: 42px;

  padding: 0.4rem 1rem;

  border-radius: var(--radius-sm);

  font-size: 0.9rem;

  font-weight: 700;

  cursor: pointer;

  border: 1px solid var(--border-color);

  background: var(--bg-surface);

  color: var(--text-main);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  transition: all 0.15s ease;

}



.btn-nav-action:disabled {

  opacity: 0.35;

  cursor: not-allowed;

}



.btn-primary-red {

  background: var(--aptech-red);

  color: #FFFFFF;

  border-color: var(--aptech-red);

}



.btn-primary-red:hover:not(:disabled) {

  background: var(--aptech-red-dark);

}



.btn-flag-toggle {

  color: var(--text-secondary);

}



.btn-flag-toggle.flagged {

  background: var(--color-flag-bg);

  color: var(--color-flag-border);

  border-color: var(--color-flag-border);

}



.btn-palette-toggle {

  background: var(--bg-muted);

}



/* Floating Question Palette Drawer */

.palette-drawer {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  width: 320px;

  background: var(--bg-surface);

  border-left: 1px solid var(--border-color);

  z-index: 150;

  transform: translateX(100%);

  transition: transform 0.25s ease;

  display: flex;

  flex-direction: column;

  box-shadow: -4px 0 15px rgba(0,0,0,0.15);

}



.palette-drawer.open {

  transform: translateX(0);

}



.palette-header {

  padding: 1rem;

  border-bottom: 1px solid var(--border-color);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.palette-header h4 {

  font-size: 1rem;

  font-weight: 800;

}



.palette-legend {

  padding: 0.75rem 1rem;

  background: var(--bg-muted);

  border-bottom: 1px solid var(--border-color);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.4rem;

  font-size: 0.75rem;

  font-weight: 600;

}



.legend-item {

  display: flex;

  align-items: center;

  gap: 0.4rem;

}



.legend-dot {

  width: 12px;

  height: 12px;

  border-radius: var(--radius-full);

}



.dot-answered { background: var(--color-correct); }

.dot-flagged { background: var(--color-flag); }

.dot-unanswered { background: var(--color-wrong); }

.dot-unvisited { background: var(--border-strong); }



.palette-grid {

  padding: 1rem;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 0.5rem;

  overflow-y: auto;

  flex: 1;

}



.palette-num-btn {

  width: 44px;

  height: 44px;

  border-radius: var(--radius-sm);

  font-size: 0.85rem;

  font-weight: 700;

  border: 1px solid var(--border-color);

  background: var(--bg-muted);

  color: var(--text-main);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.15s ease;

}



.palette-num-btn.status-answered {

  background: var(--color-correct);

  color: #FFFFFF;

  border-color: var(--color-correct);

}



.palette-num-btn.status-flagged {

  background: var(--color-flag);

  color: #FFFFFF;

  border-color: var(--color-flag);

}



.palette-num-btn.status-unanswered {

  background: var(--color-wrong-bg);

  color: var(--color-wrong);

  border-color: var(--color-wrong-border);

}



.palette-num-btn.status-current {

  box-shadow: 0 0 0 2px #2563EB;

}



/* Scorecard / Result View */

.scorecard-container {

  max-width: 800px;

  margin: 1.5rem auto;

  padding: 1rem;

  width: 100%;

}



.scorecard-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 2rem 1.5rem;

  box-shadow: var(--shadow-md);

  text-align: center;

  margin-bottom: 1.5rem;

}



.score-badge-circle {

  width: 120px;

  height: 120px;

  border-radius: var(--radius-full);

  margin: 0 auto 1.25rem auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border: 4px solid var(--color-correct);

  background: var(--color-correct-bg);

  color: var(--color-correct-border);

}



.score-badge-circle.failed {

  border-color: var(--color-wrong);

  background: var(--color-wrong-bg);

  color: var(--color-wrong-border);

}



.score-number {

  font-size: 2rem;

  font-weight: 900;

  line-height: 1;

}



.score-percent-sign {

  font-size: 0.85rem;

  font-weight: 700;

  text-transform: uppercase;

  margin-top: 0.2rem;

}



.verdict-text {

  font-size: 1.4rem;

  font-weight: 800;

  margin-bottom: 0.4rem;

}



.verdict-subtext {

  font-size: 0.95rem;

  color: var(--text-secondary);

  margin-bottom: 1.5rem;

}



.score-metrics-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

  gap: 0.75rem;

  margin-bottom: 1.75rem;

}



.metric-box {

  background: var(--bg-muted);

  border-radius: var(--radius-md);

  padding: 0.85rem 0.5rem;

}



.metric-box .m-val {

  font-size: 1.3rem;

  font-weight: 800;

  color: var(--text-main);

}



.metric-box .m-lbl {

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--text-muted);

  text-transform: uppercase;

}



.scorecard-actions {

  display: flex;

  gap: 0.75rem;

  justify-content: center;

  flex-wrap: wrap;

}



/* ========================================================

   VIEW 3: MODE 2 - 1-QUESTION-AT-A-TIME PRACTICE

   ======================================================== */

.practice-container {

  display: flex;

  flex-direction: column;

  min-height: calc(100vh - 60px);

  max-width: 800px;

  margin: 0 auto;

  width: 100%;

  padding: 1rem;

  box-sizing: border-box;

}



.practice-header-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1rem;

}



.streak-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  background: #FFF7ED;

  color: #C2410C;

  border: 1px solid #FDBA74;

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

  font-weight: 800;

  font-size: 0.9rem;

}



.practice-progress-wrap {

  width: 100%;

  height: 8px;

  background: var(--bg-muted);

  border-radius: var(--radius-full);

  overflow: hidden;

  margin-bottom: 1.25rem;

}



.practice-progress-fill {

  height: 100%;

  background: var(--color-accent);

  transition: width 0.3s ease;

}



.practice-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 1.75rem 1.25rem;

  box-shadow: var(--shadow-sm);

  margin-bottom: 1.5rem;

  display: flex;

  flex-direction: column;

  width: 100%;

  box-sizing: border-box;

}



.practice-card-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0.85rem;

}



.practice-card-prompt {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.55;

  margin-bottom: 1.5rem;

  overflow-wrap: anywhere;

  word-break: break-word;

}



.practice-options-list {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin-bottom: 1rem;

  width: 100%;

}



.practice-opt-btn {

  min-height: var(--tap-min);

  padding: 0.85rem 1rem;

  border-radius: var(--radius-md);

  border: 2px solid var(--border-color);

  background: var(--bg-surface);

  color: var(--text-main);

  font-size: 0.95rem;

  text-align: left;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  font-weight: 500;

  width: 100%;

  box-sizing: border-box;

  overflow: hidden;

}



.practice-opt-btn:hover:not(:disabled) {

  border-color: var(--color-accent);

  background: var(--bg-card-hover);

}



.practice-opt-btn:disabled {

  cursor: default;

}



.practice-opt-btn.is-selected-pending {

  border-color: var(--color-accent);

  background: var(--color-accent-bg);

  font-weight: 700;

}



.practice-opt-btn.is-correct {

  border-color: var(--color-correct);

  background: var(--color-correct-bg);

  color: var(--color-correct-text);

  font-weight: 700;

}



.practice-opt-btn.is-wrong {

  border-color: var(--color-wrong);

  background: var(--color-wrong-bg);

  color: var(--color-wrong-text);

  animation: shake 0.4s ease;

}



.practice-opt-text {

  flex: 1 1 auto;

  min-width: 0;

  overflow-wrap: anywhere;

  word-break: break-word;

  line-height: 1.45;

}



.practice-opt-indicator {

  flex: 0 0 auto;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 0.25rem;

  font-size: 0.78rem;

  font-weight: 700;

  white-space: nowrap;

  padding: 0.22rem 0.55rem;

  border-radius: var(--radius-sm);

  line-height: 1.2;

}



.practice-opt-indicator.correct {

  background: var(--color-correct);

  color: #FFFFFF;

}



.practice-opt-indicator.wrong {

  background: var(--color-wrong);

  color: #FFFFFF;

}



.practice-opt-indicator.pending {

  background: var(--color-accent);

  color: #FFFFFF;

}



@keyframes shake {

  0%, 100% { transform: translateX(0); }

  20%, 60% { transform: translateX(-6px); }

  40%, 80% { transform: translateX(6px); }

}



.feedback-banner {

  display: none;

  padding: 1rem;

  border-radius: var(--radius-md);

  margin-top: 1rem;

  animation: fadeIn 0.2s ease;

  width: 100%;

  box-sizing: border-box;

  overflow: hidden;

}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(-5px); }

  to { opacity: 1; transform: translateY(0); }

}



.feedback-banner.correct {

  display: flex;

  background: var(--color-correct-bg);

  border: 1px solid var(--color-correct);

  color: var(--color-correct-text);

}



.feedback-banner.wrong {

  display: flex;

  background: var(--color-wrong-bg);

  border: 1px solid var(--color-wrong);

  color: var(--color-wrong-text);

}



.feedback-banner-content {

  flex: 1 1 auto;

  min-width: 0;

  width: 100%;

  overflow-wrap: anywhere;

  word-break: break-word;

  line-height: 1.5;

}



.practice-controls-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 1rem;

  gap: 0.5rem;

}



/* Review Questions View */

.review-list-wrap {

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

  margin-top: 1.5rem;

  text-align: left;

}



.review-item-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 1.25rem;

  overflow-wrap: anywhere;

  word-break: break-word;

  box-sizing: border-box;

}



.review-item-card.is-correct {

  border-left: 5px solid var(--color-correct);

}



.review-item-card.is-wrong {

  border-left: 5px solid var(--color-wrong);

}



.review-item-card.is-unanswered {

  border-left: 5px solid var(--color-flag);

}



.review-opt-pill {

  padding: 0.4rem 0.75rem;

  border-radius: var(--radius-sm);

  font-size: 0.85rem;

  margin-top: 0.35rem;

  overflow-wrap: anywhere;

  word-break: break-word;

  box-sizing: border-box;

}



.review-opt-pill.chosen-wrong {

  background: var(--color-wrong-bg);

  color: var(--color-wrong);

  font-weight: 700;

}



.review-opt-pill.correct-ans {

  background: var(--color-correct-bg);

  color: var(--color-correct-border);

  font-weight: 700;

}



/* Web Toast Notification */

.web-toast {

  position: fixed;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%) translateY(20px);

  background: rgba(30, 41, 59, 0.92);

  color: #ffffff;

  padding: 0.75rem 1.5rem;

  border-radius: var(--radius-pill);

  font-size: 0.9rem;

  font-weight: 500;

  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(8px);

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease, transform 0.25s ease;

}



.web-toast.show {

  opacity: 1;

  transform: translateX(-50%) translateY(0);

}



/* Responsive adjustments */

@media (max-width: 640px) {

  .cand-meta {

    max-width: 60%;

  }

  .portal-subheader-bar {

    font-size: 0.75rem;

  }

  .palette-drawer {

    width: 100%;

  }

}



@media (max-width: 480px) {

  .practice-container {

    padding: 0.75rem;

  }

  .practice-card {

    padding: 1.25rem 0.85rem;

  }

  .practice-opt-btn {

    padding: 0.75rem 0.85rem;

    gap: 0.5rem;

  }

  .practice-card-prompt {

    font-size: 1.05rem;

  }

}