/* French Tutor Pro – tutor.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.ftp-wrap {
  --ftp-p:   #002395;
  --ftp-dk:  #001a7a;
  --ftp-a:   #ED2939;
  --ftp-al:  #fde8ea;
  --ftp-pl:  #e8ecf8;
  --ftp-pm:  #b0bce8;
  --ftp-bg:  #f5f7fc;
  --ftp-bd:  #d0d8ee;
  --ftp-tx:  #1a1f3a;
  --ftp-mu:  #5a6080;
  --ftp-wh:  #ffffff;
  --ftp-h:   750px;
  font-family: 'Inter','Segoe UI',Arial,sans-serif;
  background:  var(--ftp-wh);
  border-radius: 18px;
  box-shadow: 0 10px 50px rgba(0,35,149,.15);
  border: 1.5px solid var(--ftp-bd);
  display: flex; flex-direction: column;
  max-width: 980px; margin: 0 auto; overflow: hidden;
}

/* Header with French tricolour accent */
.ftp-head {
  background: linear-gradient(135deg, #002395 0%, #001a7a 100%);
  flex-shrink: 0;
  border-bottom: 4px solid #ED2939;
}
.ftp-brand { display:flex; align-items:center; gap:14px; padding:18px 26px 12px; }
.ftp-flag  { font-size:42px; line-height:1; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.ftp-brand-name { font-size:22px; font-weight:800; color:#fff; line-height:1.2; }
.ftp-brand-sub  { font-size:12px; color:rgba(255,255,255,.70); margin-top:3px; }
.ftp-tabs { display:flex; padding:0 26px; border-top:1px solid rgba(255,255,255,.12); }
.ftp-tab {
  background:none; border:none; border-bottom:3px solid transparent;
  color:rgba(255,255,255,.60); padding:11px 18px;
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s;
}
.ftp-tab:hover { color:#fff; }
.ftp-tab-on { color:#fff; border-bottom-color:#ED2939; }

/* Panels */
.ftp-panel { display:none; flex:1; overflow:hidden; min-height:var(--ftp-h); max-height:var(--ftp-h); }
.ftp-panel-on { display:flex; flex-direction:column; }
.ftp-hide { display:none; }

/* Curriculum */
.ftp-cur-wrap { display:flex; flex:1; overflow:hidden; height:100%; }
.ftp-sidebar {
  width:205px; flex-shrink:0; background:var(--ftp-bg);
  border-right:1px solid var(--ftp-bd);
  overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:14px 10px;
}
.ftp-sec-btn {
  width:100%; background:none; border:none; text-align:left;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ftp-tx);
  padding:9px 11px; border-radius:9px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:all .15s; margin-bottom:3px; line-height:1.4;
}
.ftp-sec-btn:hover { background:var(--ftp-pl); color:var(--ftp-p); }
.ftp-sec-on { background:var(--ftp-p) !important; color:#fff !important; }
.ftp-content {
  flex:1; overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:20px 24px;
}
.ftp-sec { display:none; }
.ftp-sec-show { display:block; animation:ftpFade .2s ease; }
.ftp-sec-head {
  display:flex; align-items:center; gap:11px;
  font-size:20px; font-weight:800; color:var(--ftp-p);
  margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--ftp-bd);
}
.ftp-item {
  border:1.5px solid var(--ftp-bd); border-radius:13px;
  margin-bottom:12px; background:var(--ftp-wh); transition:all .2s; overflow:hidden;
}
.ftp-item:hover { border-color:var(--ftp-p); box-shadow:0 3px 16px rgba(0,35,149,.1); }
.ftp-item-top { display:flex; align-items:center; gap:11px; padding:13px 16px 8px; }
.ftp-dot { width:8px; height:8px; background:var(--ftp-a); border-radius:50%; flex-shrink:0; }
.ftp-item-name { flex:1; font-size:14px; font-weight:600; color:var(--ftp-tx); line-height:1.5; }
.ftp-explain-btn {
  background:var(--ftp-pl); color:var(--ftp-p);
  border:1.5px solid var(--ftp-pm); padding:6px 13px; border-radius:8px;
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
  flex-shrink:0; transition:all .2s;
}
.ftp-explain-btn:hover { background:var(--ftp-p); color:#fff; }

/* YouTube video buttons */
.ftp-videos { display:flex; flex-wrap:wrap; gap:7px; padding:2px 16px 13px; }
.ftp-vid-btn {
  display:flex; align-items:center; gap:8px;
  background:#fff5f5; border:1.5px solid #ffcdd2;
  border-radius:8px; padding:6px 12px;
  text-decoration:none; transition:all .2s; max-width:280px;
}
.ftp-vid-btn:hover { background:#ED2939; border-color:#ED2939; }
.ftp-vid-btn:hover .ftp-yt-play,
.ftp-vid-btn:hover .ftp-vid-title,
.ftp-vid-btn:hover .ftp-vid-ch { color:#fff; }
.ftp-yt-play { font-size:13px; color:#ED2939; font-weight:900; flex-shrink:0; }
.ftp-vid-info { display:flex; flex-direction:column; }
.ftp-vid-title { font-size:12px; font-weight:600; color:var(--ftp-tx); line-height:1.3; }
.ftp-vid-ch { font-size:10px; color:var(--ftp-mu); margin-top:1px; }

/* Explain box */
.ftp-explain-box {
  background:var(--ftp-wh); border:2px solid var(--ftp-p);
  border-radius:14px; margin-top:20px; overflow:hidden;
  box-shadow:0 6px 30px rgba(0,35,149,.15);
}
.ftp-explain-head {
  background:var(--ftp-pl); padding:12px 18px; border-bottom:1px solid var(--ftp-bd);
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:700; color:var(--ftp-p);
}
.ftp-explain-close {
  background:none; border:none; color:var(--ftp-mu); cursor:pointer;
  font-size:13px; padding:4px 9px; border-radius:6px; font-family:inherit;
}
.ftp-explain-close:hover { background:var(--ftp-bd); }
.ftp-explain-body { padding:20px 24px; font-size:14px; line-height:1.9; color:var(--ftp-tx); }

/* Practice */
.ftp-practice-wrap {
  padding:22px 24px; overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:16px; flex:1;
}
.ftp-practice-title { font-size:16px; font-weight:700; color:var(--ftp-p); margin:0 0 10px; }
.ftp-pills { display:flex; flex-wrap:wrap; gap:8px; }
.ftp-pill {
  background:var(--ftp-bg); border:1.5px solid var(--ftp-bd); border-radius:20px;
  padding:7px 16px; font-family:inherit; font-size:13px; font-weight:600; color:var(--ftp-mu);
  cursor:pointer; transition:all .15s;
}
.ftp-pill:hover { border-color:var(--ftp-p); color:var(--ftp-p); }
.ftp-pill-on { background:var(--ftp-p); border-color:var(--ftp-p); color:#fff; }
.ftp-pill-red { border-color:#ED2939; color:#b71c1c; }
.ftp-pill-red.ftp-pill-on { background:#ED2939; border-color:#ED2939; color:#fff; }
.ftp-pill-blue { border-color:#4a6cf7; color:#2a3db0; }
.ftp-pill-blue.ftp-pill-on { background:#4a6cf7; border-color:#4a6cf7; color:#fff; }

.ftp-mcq-settings { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.ftp-field { display:flex; flex-direction:column; gap:5px; flex:1; min-width:140px; }
.ftp-field label { font-size:12px; font-weight:700; color:var(--ftp-mu); }
.ftp-mcq-topic,.ftp-mcq-count,.ftp-mcq-diff,.ftp-fc-topic {
  border:1.5px solid var(--ftp-bd); border-radius:9px; padding:8px 11px;
  font-family:inherit; font-size:13px; color:var(--ftp-tx); background:var(--ftp-wh); cursor:pointer;
}
.ftp-mcq-topic:focus,.ftp-mcq-count:focus,.ftp-mcq-diff:focus,.ftp-fc-topic:focus { outline:none; border-color:var(--ftp-p); }
.ftp-btn-primary {
  background:var(--ftp-p); color:#fff; border:none;
  padding:10px 24px; border-radius:9px; font-family:inherit;
  font-size:14px; font-weight:700; cursor:pointer; transition:all .2s;
  box-shadow:0 4px 16px rgba(0,35,149,.3);
}
.ftp-btn-primary:hover { background:var(--ftp-dk); transform:translateY(-1px); }
.ftp-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.ftp-mcq-progress,.ftp-fc-progress {
  display:flex; align-items:center; gap:12px;
  font-size:14px; color:var(--ftp-mu); font-weight:600; padding:8px 0;
}
.ftp-mcq-card {
  background:var(--ftp-wh); border:2px solid var(--ftp-bd);
  border-radius:13px; padding:20px; margin-top:12px;
  box-shadow:0 2px 12px rgba(0,35,149,.07);
}
.ftp-mcq-q { font-size:15px; font-weight:700; color:var(--ftp-tx); margin-bottom:14px; line-height:1.6; }
.ftp-mcq-opts { display:flex; flex-direction:column; gap:8px; }
.ftp-mcq-opt {
  width:100%; text-align:left; background:var(--ftp-bg);
  border:1.5px solid var(--ftp-bd); border-radius:10px; padding:11px 16px;
  font-family:inherit; font-size:14px; font-weight:500; color:var(--ftp-tx);
  cursor:pointer; transition:all .15s; line-height:1.5;
}
.ftp-mcq-opt:hover:not(:disabled) { background:var(--ftp-pl); border-color:var(--ftp-p); color:var(--ftp-p); }
.ftp-mcq-opt:disabled { cursor:default; }
.ftp-opt-right { background:#d4f4e0 !important; border-color:#27ae60 !important; color:#145a32 !important; font-weight:700 !important; }
.ftp-opt-wrong { background:#fde8e8 !important; border-color:#ED2939 !important; color:#8c1d1d !important; }
.ftp-mcq-fb { margin-top:10px; padding:10px 14px; border-radius:9px; font-size:14px; font-weight:700; }
.ftp-fb-ok { background:#d4f4e0; color:#145a32; }
.ftp-fb-no { background:#fde8e8; color:#8c1d1d; }
.ftp-mcq-exp { margin-top:10px; padding:12px 16px; background:#fff5e5; border-left:4px solid #ED2939; border-radius:0 10px 10px 0; font-size:13px; line-height:1.8; }

/* Flashcards */
.ftp-fc-zone { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:12px; }
.ftp-fc { height:170px; perspective:900px; cursor:pointer; }
.ftp-fc-in { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.ftp-fc-flipped .ftp-fc-in { transform:rotateY(180deg); }
.ftp-fc-face { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; text-align:center; gap:8px; }
.ftp-fc-front { background:linear-gradient(135deg,#002395,#001a7a); color:#fff; }
.ftp-fc-back  { background:#fff5f5; border:2px solid #ED2939; color:var(--ftp-tx); transform:rotateY(180deg); }
.ftp-fc-text  { font-size:14px; font-weight:700; line-height:1.5; }
.ftp-fc-hint  { font-size:11px; opacity:.7; }

/* Tools */
.ftp-tools-wrap {
  padding:22px 24px; overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; flex:1;
}
.ftp-tools-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.ftp-tool-card {
  background:var(--ftp-wh); border:1.5px solid var(--ftp-bd);
  border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 2px 12px rgba(0,35,149,.07);
}
.ftp-tool-head { font-size:16px; font-weight:700; color:var(--ftp-p); }
.ftp-tool-desc { font-size:13px; color:var(--ftp-mu); line-height:1.5; }
.ftp-tool-ta {
  width:100%; border:1.5px solid var(--ftp-bd); border-radius:10px;
  padding:12px 14px; font-family:inherit; font-size:14px; line-height:1.7;
  color:var(--ftp-tx); resize:vertical; box-sizing:border-box;
}
.ftp-tool-ta:focus { outline:none; border-color:var(--ftp-p); }
.ftp-trans-dir { display:flex; gap:8px; }
.ftp-dir-btn {
  flex:1; padding:8px; border:1.5px solid var(--ftp-bd); border-radius:8px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ftp-mu);
  background:var(--ftp-bg); cursor:pointer; transition:all .15s; text-align:center;
}
.ftp-dir-btn:hover { border-color:var(--ftp-p); color:var(--ftp-p); }
.ftp-dir-on { background:var(--ftp-p); border-color:var(--ftp-p); color:#fff; }
.ftp-conj-row { display:flex; gap:8px; }
.ftp-conj-input {
  flex:1; border:1.5px solid var(--ftp-bd); border-radius:9px; padding:9px 12px;
  font-family:inherit; font-size:14px; color:var(--ftp-tx);
}
.ftp-conj-input:focus { outline:none; border-color:var(--ftp-p); }
.ftp-conj-tense {
  border:1.5px solid var(--ftp-bd); border-radius:9px; padding:9px 10px;
  font-family:inherit; font-size:13px; color:var(--ftp-tx); background:var(--ftp-wh); cursor:pointer;
}
.ftp-vocab-theme {
  width:100%; border:1.5px solid var(--ftp-bd); border-radius:9px; padding:9px 12px;
  font-family:inherit; font-size:14px; color:var(--ftp-tx); background:var(--ftp-wh); cursor:pointer;
}
.ftp-tool-loading { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ftp-mu); font-weight:600; }
.ftp-tool-result {
  border:1.5px solid var(--ftp-bd); border-radius:10px; padding:14px 16px;
  font-size:14px; line-height:1.9; color:var(--ftp-tx); background:var(--ftp-bg); max-height:300px; overflow-y:auto;
}

/* Chat */
.ftp-chat-wrap { display:flex; flex-direction:column; flex:1; height:100%; overflow:hidden; }
.ftp-msgs {
  flex:1; overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:20px 22px; display:flex; flex-direction:column; gap:16px;
}
.ftp-msg { display:flex; gap:10px; align-items:flex-start; }
.ftp-bot { flex-direction:row; }
.ftp-user { flex-direction:row-reverse; }
.ftp-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:var(--ftp-pl); box-shadow:0 2px 8px rgba(0,35,149,.15); }
.ftp-user .ftp-avatar { background:var(--ftp-al); }
.ftp-msg-inner { display:flex; flex-direction:column; max-width:78%; }
.ftp-bot  .ftp-msg-inner { align-items:flex-start; }
.ftp-user .ftp-msg-inner { align-items:flex-end; }
.ftp-bubble { padding:12px 16px; border-radius:16px; font-size:14px; line-height:1.8; color:var(--ftp-tx); box-shadow:0 2px 8px rgba(0,0,0,.05); }
.ftp-bot  .ftp-bubble { background:var(--ftp-bg); border:1px solid var(--ftp-bd); border-top-left-radius:4px; }
.ftp-user .ftp-bubble { background:var(--ftp-p); color:#fff; border-top-right-radius:4px; }
.ftp-bubble p  { margin:0 0 7px; } .ftp-bubble p:last-child { margin-bottom:0; }
.ftp-bubble ul { margin:7px 0; padding-left:20px; } .ftp-bubble li { margin-bottom:4px; }
.ftp-dots { display:flex; gap:4px; align-items:center; padding:4px 0; }
.ftp-dots span { width:7px; height:7px; background:var(--ftp-p); border-radius:50%; animation:ftpBounce .9s infinite; }
.ftp-dots span:nth-child(2) { animation-delay:.15s; }
.ftp-dots span:nth-child(3) { animation-delay:.30s; }
.ftp-suggests { padding:9px 16px 8px; display:flex; flex-wrap:wrap; gap:7px; border-top:1px solid var(--ftp-bd); background:var(--ftp-bg); flex-shrink:0; }
.ftp-sug { background:var(--ftp-wh); border:1.5px solid var(--ftp-bd); border-radius:20px; padding:5px 13px; font-family:inherit; font-size:12px; font-weight:600; color:var(--ftp-tx); cursor:pointer; transition:all .15s; }
.ftp-sug:hover { background:var(--ftp-p); border-color:var(--ftp-p); color:#fff; }
.ftp-input-row { display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--ftp-bd); background:var(--ftp-wh); flex-shrink:0; }
.ftp-mic { width:42px; height:42px; background:var(--ftp-bg); border:1.5px solid var(--ftp-bd); border-radius:12px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
.ftp-mic:hover { background:var(--ftp-pl); border-color:var(--ftp-p); }
.ftp-mic-on { background:#ED2939 !important; border-color:#b71c1c !important; color:#fff; font-size:12px !important; width:58px !important; }
.ftp-input { flex:1; border:1.5px solid var(--ftp-bd); border-radius:12px; padding:10px 14px; font-family:inherit; font-size:14px; resize:none; color:var(--ftp-tx); background:var(--ftp-wh); max-height:120px; transition:border-color .2s,box-shadow .2s; }
.ftp-input:focus { outline:none; border-color:var(--ftp-p); box-shadow:0 0 0 3px rgba(0,35,149,.12); }
.ftp-send { width:42px; height:42px; background:var(--ftp-p); border:none; border-radius:12px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; box-shadow:0 3px 14px rgba(0,35,149,.35); }
.ftp-send:hover { background:var(--ftp-dk); transform:scale(1.06); }
.ftp-send svg { width:18px; height:18px; }
.ftp-send:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* TTS */
.ftp-tts-bar { display:flex; padding:6px 2px 2px; }
.ftp-explain-body .ftp-tts-bar,.ftp-tool-result .ftp-tts-bar { padding:10px 20px 14px; border-top:1px solid var(--ftp-bd); margin-top:6px; }
.ftp-tts-btn { background:transparent; border:1.5px solid var(--ftp-bd); border-radius:20px; padding:5px 16px; font-family:inherit; font-size:13px; font-weight:600; color:var(--ftp-p); cursor:pointer; transition:all .2s; }
.ftp-tts-btn:hover { background:var(--ftp-p); border-color:var(--ftp-p); color:#fff; }
.ftp-tts-btn.ftp-tts-on { background:#ED2939 !important; border-color:#ED2939 !important; color:#fff !important; }

/* Spinner */
.ftp-spin { width:22px; height:22px; border:3px solid var(--ftp-bd); border-top-color:var(--ftp-p); border-radius:50%; animation:ftpSpin .7s linear infinite; flex-shrink:0; }
.ftp-explain-loading { display:flex; align-items:center; gap:12px; padding:20px; font-size:14px; color:var(--ftp-mu); font-weight:600; }

/* AI content */
.ftp-ai h1,.ftp-ai h2,.ftp-ai h3 { color:var(--ftp-p); margin:16px 0 8px; }
.ftp-ai h3 { font-size:15px; }
.ftp-ai p { margin:0 0 10px; }
.ftp-ai ul,.ftp-ai ol { padding-left:22px; margin:8px 0; }
.ftp-ai li { margin-bottom:6px; line-height:1.7; }
.ftp-ai strong { color:var(--ftp-p); }
.ftp-ai em { color:#ED2939; font-style:italic; }
.ftp-ai code { background:var(--ftp-pl); color:var(--ftp-p); padding:2px 7px; border-radius:5px; font-size:.9em; }
.ftp-ai blockquote { border-left:4px solid #ED2939; padding:8px 16px; margin:10px 0; background:var(--ftp-al); border-radius:0 8px 8px 0; font-style:italic; }

.ftp-err { color:#c00; }

/* Scrollbars */
.ftp-msgs::-webkit-scrollbar,.ftp-content::-webkit-scrollbar,.ftp-sidebar::-webkit-scrollbar,.ftp-practice-wrap::-webkit-scrollbar,.ftp-tools-wrap::-webkit-scrollbar { width:5px; }
.ftp-msgs::-webkit-scrollbar-track,.ftp-content::-webkit-scrollbar-track { background:transparent; }
.ftp-msgs::-webkit-scrollbar-thumb,.ftp-content::-webkit-scrollbar-thumb { background:var(--ftp-bd); border-radius:3px; }

@keyframes ftpFade   { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes ftpSpin   { to{transform:rotate(360deg)} }
@keyframes ftpBounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

@media(max-width:700px){
  .ftp-tools-grid{grid-template-columns:1fr;}
  .ftp-sidebar{width:155px;} .ftp-brand-name{font-size:18px;}
  .ftp-tab{padding:10px 11px;font-size:13px;}
  .ftp-panel{min-height:520px;max-height:520px;}
  .ftp-fc-zone{grid-template-columns:1fr 1fr;}
}
@media(max-width:500px){
  .ftp-cur-wrap{flex-direction:column;}
  .ftp-sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--ftp-bd);display:flex;flex-wrap:wrap;gap:5px;padding:8px;overflow-y:visible;}
  .ftp-sec-btn{width:auto;font-size:12px;padding:6px 10px;}
  .ftp-fc-zone{grid-template-columns:1fr;}
  .ftp-conj-row{flex-direction:column;}
}