:root {
  --orange: #F26B1D;
  --orange-deep: #C2410C;
  --charcoal: #1E1B18;
  --bg: #FFF8F2;
  --surface: #FFFFFF;
  --surface2: #FFF1E6;
  --text: #1E1B18;
  --muted: #6B5E54;
  --teal: #F26B1D;
  --teal-dark: #C2410C;
  --teal-bright: #F26B1D;
  --navy: #1E1B18; /* charcoal, not blue */
  --accent: #E8735A;
  --coral-text: #B5452E;
  --card: #FFFFFF;
  --border: #E8D9CC;
  --shadow: 0 4px 16px rgba(15,42,68,0.08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "DM Sans", var(--font), system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

.app { display: flex; height: 100vh; }

.sidebar {
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
}

.logo {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.logo-icon {
  background: var(--teal);
  color: #000;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
}
.logo strong { display: block; font-size: 0.95rem; }
.logo small { color: var(--muted); font-size: 0.75rem; }

nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.nav-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.nav-btn:hover, .nav-btn.active {
  background: var(--surface2);
  color: var(--text);
}
.nav-btn.active { color: var(--teal); font-weight: 600; }

.progress-mini { margin-top: auto; padding-top: 1rem; }
.progress-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.4rem 0;
}
#progressFill { height: 100%; background: var(--teal); transition: width 0.3s; }
.progress-label { font-size: 0.75rem; color: var(--muted); }

.main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2.5rem;
  background: var(--bg);
}

.view { display: none; }
.view.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 { font-size: 2.1rem; margin: 0 0 0.75rem; line-height: 1.2; }
h2 { margin-top: 0; }
.subtitle { color: var(--muted); margin-top: -0.5rem; margin-bottom: 1.5rem; }

.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.tutor-hero {
  width: 100%;
  max-width: 320px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  border: 4px solid var(--teal);
}
.hero-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }

.btn {
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.btn.primary { background: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dark); }
.btn.primary:hover { background: var(--teal-dark); }
.btn.secondary { background: var(--surface2); color: var(--text); }
.btn.secondary:hover { background: var(--border); }

.quick-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.path-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.path-card:hover { transform: translateY(-2px); border-color: var(--teal); }
.path-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.path-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Chat */
.chat-layout { display: flex; flex-direction: column; height: calc(100vh - 4rem); max-width: 1100px; }
.chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.avatar-sm { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal); }
.status { display: block; font-size: 0.8rem; color: var(--muted); }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.message {
  max-width: 75%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  line-height: 1.45;
  font-size: 0.95rem;
}
.message.tutor {
  background: var(--surface);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.message.user {
  background: var(--teal);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.message code {
  background: var(--surface2);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.85em;
}
.quick-replies { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.quick-reply {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
}
.quick-reply:hover { border-color: var(--teal); }
.input-row { display: flex; gap: 0.5rem; }
#chatInput {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
}
#chatInput:focus { outline: none; border-color: var(--teal); }

/* Lessons */
.lessons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.lesson-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
  cursor: pointer;
}
.lesson-card:hover { border-color: var(--teal); }
.lesson-card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.lesson-card p { margin: 0; color: var(--muted); font-size: 0.85rem; }

/* Lab */
.lab-controls { display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center; }
#messageSelect {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  min-width: 280px;
}
.lab-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
.message-box {
  background: var(--navy); color: #E8F1F8;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 520px;
  overflow: auto;
}
.message-box .seg { cursor: pointer; display: block; padding: 0.15rem 0; border-radius: 4px; }
.message-box .seg:hover { background: #1D4166; }
.message-box .field-highlight { background: #F26B1D; color: #1E1B18; }
.explanation-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  min-height: 300px;
}
.explanation-panel h4 { margin: 0 0 0.5rem; color: var(--teal); }

/* Practice & Cards */
.quiz-question { background: var(--card); padding: 1.25rem; border-radius: 12px; margin-bottom: 1rem; }
.options { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.option {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.option:hover { border-color: var(--teal); }
.option.correct { background: #E3F5EC; border-color: #1E8A55; color: #0F4D2E; }
.option.wrong { background: #FDECE8; border-color: var(--accent); color: #8A2E1C; }

.flashcard-container { display: flex; flex-direction: column; align-items: center; }
.flashcard {
  width: 420px;
  height: 240px;
  perspective: 1000px;
  cursor: pointer;
  margin: 1.5rem 0;
}
.flashcard .front, .flashcard .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 500;
  border: 1px solid var(--border);
}
.flashcard .front { background: var(--surface); }
.flashcard .back { background: var(--teal); color: #fff; transform: rotateY(180deg); }
.flashcard.flipped .front { transform: rotateY(180deg); }
.flashcard.flipped .back { transform: rotateY(0deg); }
.card-controls { display: flex; gap: 0.5rem; }

.video-wrapper {
  max-width: 1100px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
}
#tutorialVideo { width: 100%; display: block; }
.video-note { color: var(--muted); }

.resource-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.resource {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  color: var(--teal);
  text-decoration: none;
  display: block;
}
.resource:hover { border-color: var(--teal); }

@media (max-width: 900px) {
  .sidebar { width: 72px; padding: 1rem 0.5rem; }
  .logo div, .nav-btn span, .progress-mini { display: none; }
  .hero { grid-template-columns: 1fr; }
  .lab-layout { grid-template-columns: 1fr; }
}

.site-footer{padding:16px 24px;font-size:12px;color:var(--muted);text-align:center;border-top:1px solid var(--border);background:var(--surface)}
.nav-btn.active{border-left:3px solid var(--accent)}
@media (max-width: 760px){
  body{height:auto;overflow:auto}
  .app{flex-direction:column;height:auto}
  .sidebar{width:100%;border-right:0;border-bottom:1px solid var(--border)}
  .sidebar nav{flex-direction:row;flex-wrap:wrap;gap:4px}
}
/* Exam prep + Engine Lab */
.exam-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.exam-tab.active{background:var(--navy);color:#fff}
.exam-body{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;line-height:1.6}
.exam-table{border-collapse:collapse;width:100%;font-size:.9rem}
.exam-table th,.exam-table td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
.exam-table th{background:var(--surface2)}
.exam-mod{border-bottom:1px solid var(--border);padding:8px 0}.exam-mod summary{cursor:pointer}
.glossary dt{font-weight:700;margin-top:8px}.glossary dd{margin:0 0 4px 0;color:var(--muted)}
.exam-q{padding:10px;border:1px solid var(--border);border-radius:8px;margin:10px 0}
.exam-q label{display:block;padding:3px 0;cursor:pointer}
.exam-q.ok{border-color:#1E8A55;background:#EEF9F3}.exam-q.bad{border-color:var(--accent);background:#FDF1EE}
.exam-exp{font-size:.88rem;color:var(--text);margin-top:4px}
.eng-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0}
.panel h3{font-size:.95rem;margin:10px 0 6px;color:var(--navy)}
.panel textarea,.panel input,.panel select,.ex input{width:100%;font-family:var(--mono);font-size:.8rem;padding:6px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}.row input{width:auto;flex:1}
.map-row,.route-row{display:flex;gap:4px;margin:4px 0;align-items:center}.map-row input,.route-row input{flex:1;min-width:0}
.btn.sm{padding:.3rem .6rem;font-size:.8rem}
.eng-tree{max-height:320px;overflow:auto;font-size:.78rem;font-family:var(--mono)}.eng-tree ul{margin:0;padding-left:16px}
.pth{color:var(--teal);cursor:pointer;text-decoration:underline}
.eng-pre{background:var(--navy);color:#E8F1F8;padding:8px;border-radius:8px;white-space:pre-wrap;word-break:break-all;font-size:.75rem;min-height:60px}
.err{color:#8A2E1C}.warn{color:#7A5A00}.ok{color:#0F4D2E}.muted{color:var(--muted)}
.badge{padding:2px 8px;border-radius:10px;font-size:.8rem;color:#fff}.b-AA{background:#1E8A55}.b-AE{background:#9A6A00}.b-AR{background:#B5452E}
.dests{display:flex;gap:8px;flex-wrap:wrap}.dest{border:1px solid var(--border);border-radius:8px;padding:8px 10px}.dest span{font-weight:700;margin-left:4px}.dest.hit{border-color:var(--teal-bright);background:#E6F6F6}
.ex-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ex{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:10px}.ex.done{border-left-color:#1E8A55}.ex p{margin:6px 0;font-size:.88rem}.ex input{margin-bottom:6px}
.ex-msg{font-size:.82rem}
@media (max-width:1100px){.eng-grid{grid-template-columns:1fr}}
/* Guided engine */
.eng-mode{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:6px 0 12px}
.eng-mode button{border:0;background:#fff;padding:.5rem .9rem;cursor:pointer;color:var(--text);font:inherit}.eng-mode button.active{background:var(--navy);color:#fff}
.g-pipe{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:12px}
.g-node{border:2px solid var(--border);background:#fff;border-radius:999px;padding:.35rem .75rem;cursor:pointer;font:inherit;font-size:.85rem;color:var(--text)}
.g-node.cur{border-color:var(--teal);background:var(--teal);color:#fff;font-weight:700}.g-node.done{border-color:var(--teal-bright)}
.g-arrow{color:var(--muted)}
.g-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:18px;max-width:1100px}
.g-card h3{margin:0 0 6px}.g-hint{background:#FFF6F2;border-left:4px solid var(--accent);padding:8px 10px;border-radius:6px}
.g-l{display:block;font-weight:600;margin:10px 0 4px}
.g-card textarea,.g-card input,.g-card select{width:100%;font-family:var(--mono);font-size:.85rem;padding:8px;border:1px solid #D4C4B4;border-radius:8px;box-sizing:border-box}
.g-card .row input{width:auto;flex:1}
.g-what{margin-top:14px;background:#E6F6F6;border-radius:8px;padding:10px}
.g-nav{display:flex;justify-content:space-between;margin-top:14px}
.g-errs{padding-left:18px}