/* Base reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #f6f7fb;
  color: #111827;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}
html[dir="rtl"] body {
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Tahoma, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.container {
  max-width: 980px;
  margin: 32px auto 64px;
  padding: 0 16px;
}

/* Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.app-header .brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}
.brand-logo {
  width: 140px;
  height: auto;
  object-fit: contain;
}
.brand-texts { display:flex; flex-direction:column; gap:4px; }
.tagline { font-size: 12px; color:#6b7280; }
.tagline .accent { color: #dc2626; font-weight: 700; }
.divider { width:1px; height:28px; background:#e5e7eb; margin-inline:8px; }
.title { font-weight: 700; font-size: 18px; }

.app-header { display:flex; align-items:center; justify-content:space-between; }
.lang-switch { display:flex; align-items:center; gap:6px; padding: 0 16px; }
.lang-switch .chip {
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111827;
  padding:6px 10px; border-radius:999px; font-weight:600; cursor:pointer; font-size:12px;
}
.lang-switch .chip.active { background:#111827; color:#fff; border-color:#111827; }
.lang-switch .slash { color:#9ca3af; font-weight:700; }

/* Card */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(17,24,39,0.06);
  padding: 24px;
  position: relative;
  overflow: visible;
}
/* Extra breathing room placeholder (no decorative images now) */
.with-decor { padding: 24px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 6px; position: relative; z-index: 1; }
.card-title { margin:0; font-size: 22px; }
/* Center the title in the header while keeping the pill aligned to the right */
.card-head .card-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.muted { color:#6b7280; margin-top:6px; margin-bottom: 18px; }
.pill {
  background: #f4f2ff; color:#6d28d9; border:1px solid #e9e5ff; font-weight:700;
  padding:6px 10px; border-radius:999px; font-size:12px;
  white-space: nowrap; /* Prevent line breaks */
  display: inline-block;
}

/* Grid */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.scenario-tile {
  appearance:none; width:100%; border:1px solid #e5e7eb; background:#fff; color:#111827;
  padding: 22px 12px; border-radius: 14px; font-weight: 700; cursor:pointer; text-align:center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.scenario-tile:hover { border-color:#c7d2fe; box-shadow:0 6px 12px rgba(59,130,246,0.08); }
.scenario-tile:active { transform: translateY(1px); }
.scenario-tile.done, .scenario-tile:disabled {
  background:#f9fafb; color:#9ca3af; border-color:#e5e7eb; cursor:not-allowed; box-shadow:none;
}
.scenario-tile.selected {
  background:#eff6ff; border-color:#3b82f6; color:#1d4ed8;
}
.scenario-tile.disabled {
  background:#f3f4f6; color:#9ca3af; border-color:#e5e7eb; cursor:not-allowed; opacity:0.6;
}

.footnote { color:#6b7280; margin-top:16px; font-size:14px; }

/* Scenario description */
.desc-title { margin: 16px 0 8px; font-size: 16px; font-weight: 600; color:#374151; }
.scenario-desc { 
  background: #f9fafb; 
  border: 1px solid #e5e7eb; 
  border-radius: 12px; 
  padding: 16px; 
  margin: 8px 0 16px; 
  line-height: 1.6;
  white-space: pre-line;
}

/* Question view */
.breadcrumb { color:#6b7280; font-size: 13px; margin-bottom: 8px; display:flex; align-items:center; gap:6px; }
.breadcrumb .link-btn { color:#2563eb; background:transparent; border:none; padding:0; cursor:pointer; font-weight:600; }
.sep { color:#d1d5db; }
.q-title { margin: 8px 0 10px; font-size: 20px; font-weight: 700; }

.feedback { margin: 8px 0 12px; font-weight:700; }
.feedback.ok { color:#047857; }
.feedback.bad { color:#b91c1c; }

.options { display:flex; flex-direction:column; gap:10px; }
.option {
  display:flex; align-items:flex-start; gap:12px; border:1px solid #e5e7eb; border-radius: 12px; padding:14px 12px; cursor:pointer; background:#fff;
}
.option:hover { border-color:#c7d2fe; }
.option .letter {
  width: 28px; height: 28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; border:1px solid #e5e7eb; color:#6b7280; background:#f9fafb;
}
.option .text { flex: 1; }
.option.correct { border-color:#6ee7b7; background:#ecfdf5; }
.option.wrong { border-color:#f87171; background:#fef2f2; }
.option.disabled { pointer-events:none; opacity:0.9; }

.actions { display:flex; justify-content: flex-end; gap:10px; margin-top:14px; }
.actions.center { justify-content:center; }
.btn { appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111827; padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer; }
.btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.btn.ghost { background:#fff; color:#111827; }
.btn:disabled { opacity:0.6; cursor:not-allowed; }

.link-btn { color:#2563eb; border:none; background:transparent; padding:0; cursor:pointer; }

.hidden { display:none; }

/* Footer */
.app-footer { margin: 24px 0 32px; color:#9ca3af; font-size:12px; text-align:center; }

/* RTL tweaks */
html[dir="rtl"] .scenario-grid { direction: rtl; }
html[dir="rtl"] .sep { transform: scaleX(-1); }

/* Decorative arrows */
.decorative-arrows {
  position: fixed;
  top: 50%;
  width: 107px;
  height: auto;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
  transform: translateY(-50%);
}

.decorative-arrows-right {
  right: 20px;
}

.decorative-arrows-left {
  left: 20px;
  transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .decorative-arrows-right {
  right: auto;
  left: 20px;
  transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .decorative-arrows-left {
  left: auto;
  right: 20px;
  transform: translateY(-50%) scaleX(1);
}