/* ============================================================
   Focus Education LMS — Core Stylesheet v3.0 — VIBRANT
   A colourful, animated, student-friendly design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@500&display=swap');

/* ══════════════════════════════════════════
   COLOUR TOKENS — Dark (default)
══════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --fe-navy:        #0A0F1E;
  --fe-navy2:       #111827;
  --fe-navy3:       #1A2235;
  --fe-navy4:       #222D42;
  --fe-navy5:       #2C3A55;

  /* Brand yellow */
  --fe-yellow:      #F5C518;
  --fe-yellow-dk:   #D4A800;
  --fe-yellow-lt:   #FFD740;
  --fe-yellow-bg:   rgba(245,197,24,0.13);
  --fe-yellow-bg2:  rgba(245,197,24,0.07);

  /* Vibrant palette */
  --fe-purple:      #8B5CF6;
  --fe-purple-lt:   #A78BFA;
  --fe-purple-bg:   rgba(139,92,246,0.13);
  --fe-pink:        #EC4899;
  --fe-pink-lt:     #F472B6;
  --fe-pink-bg:     rgba(236,72,153,0.13);
  --fe-teal:        #14B8A6;
  --fe-teal-lt:     #2DD4BF;
  --fe-teal-bg:     rgba(20,184,166,0.13);
  --fe-orange:      #F97316;
  --fe-orange-lt:   #FB923C;
  --fe-orange-bg:   rgba(249,115,22,0.13);

  /* Semantic */
  --fe-success:     #22C55E;
  --fe-success-bg:  rgba(34,197,94,0.13);
  --fe-danger:      #EF4444;
  --fe-danger-bg:   rgba(239,68,68,0.13);
  --fe-warning:     #F59E0B;
  --fe-warning-bg:  rgba(245,158,11,0.13);
  --fe-info:        #3B82F6;
  --fe-info-bg:     rgba(59,130,246,0.13);

  /* Text */
  --fe-text:        #F1F5FF;
  --fe-text2:       #B0BBCC;
  --fe-text3:       #5A6A88;

  /* Borders */
  --fe-border:      rgba(255,255,255,0.06);
  --fe-border2:     rgba(255,255,255,0.11);

  /* Layout */
  --fe-sidebar-w:   228px;
  --fe-header-h:    64px;
  --fe-radius:      12px;
  --fe-radius-lg:   16px;
  --fe-radius-xl:   22px;

  /* Shadows */
  --fe-shadow:      0 4px 28px rgba(0,0,0,0.45);
  --fe-shadow-sm:   0 2px 10px rgba(0,0,0,0.3);
  --fe-shadow-card: 0 8px 40px rgba(0,0,0,0.55);
  --fe-glow-yellow: 0 0 20px rgba(245,197,24,0.30);
  --fe-glow-purple: 0 0 20px rgba(139,92,246,0.30);
  --fe-glow-teal:   0 0 20px rgba(20,184,166,0.30);
}

/* ── GLOBAL KEYFRAMES ── */
@keyframes fe-spin    { to { transform: rotate(360deg); } }
@keyframes fe-pulse   { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
@keyframes fe-fadein  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes fe-slideup { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fe-pop     { 0%{transform:scale(0.9);opacity:0} 70%{transform:scale(1.03)} 100%{transform:scale(1);opacity:1} }
@keyframes fe-shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes fe-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes fe-glow-pulse { 0%,100%{box-shadow:0 0 10px rgba(245,197,24,0.2)} 50%{box-shadow:0 0 28px rgba(245,197,24,0.5)} }
@keyframes fe-bounce-in { 0%{transform:scale(0.7) rotate(-4deg);opacity:0} 60%{transform:scale(1.08) rotate(1deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes fe-star-drift { 0%{transform:translateY(0) rotate(0)} 100%{transform:translateY(-100vh) rotate(720deg)} }
@keyframes fe-gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes fe-slide-in-left { from{transform:translateX(-16px);opacity:0} to{transform:none;opacity:1} }
@keyframes fe-counter-up { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.flms-wrap *, .flms-layout *, .flms-auth-page * { box-sizing: border-box; }

/* ── BASE ── */
.flms-auth-page,
.flms-layout {
  font-family: 'DM Sans','Segoe UI',system-ui,sans-serif;
  background: var(--fe-navy);
  color: var(--fe-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ══════════════════════════════════════════
   AUTH PAGES — Vibrant animated backgrounds
══════════════════════════════════════════ */
.flms-auth-page {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px 60px; min-height: 100vh; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0A0F1E 0%, #0F172A 40%, #1A0A2E 100%);
}
/* Animated mesh background */
.flms-auth-page::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(139,92,246,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 80%, rgba(245,197,24,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 60% 10%, rgba(20,184,166,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 30% at 10% 80%, rgba(236,72,153,0.10) 0%, transparent 60%);
  animation: fe-gradient-shift 12s ease infinite;
  background-size: 200% 200%;
}
.flms-auth-page > * { position: relative; z-index: 1; }

/* Brand header — compact horizontal strip */
.flms-brand-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px 18px;
  width: 100%; max-width: 600px; margin-bottom: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  animation: fe-slideup 0.4s ease;
  display: flex; align-items: center; gap: 14px;
  /* logo on left, tagline beside it — no centering */
}
/* Dark theme override */
[data-flms-theme="dark"] .flms-brand-header {
  background: rgba(17,24,39,0.85);
  border-color: rgba(255,255,255,0.09);
}
.flms-brand-logo {
  width: 56px; height: 56px; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--fe-purple) 0%, var(--fe-yellow) 100%);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: var(--fe-glow-yellow);
  animation: fe-float 4s ease-in-out infinite;
}

/* ── Auth pages: site logo — compact, controlled size ── */
.flms-auth-logo-link {
  display: flex; align-items: center; text-decoration: none; flex-shrink: 0;
}
.flms-auth-logo-link img,
.flms-auth-logo-link .custom-logo {
  height: var(--flms-auth-logo-h, 36px) !important;
  width: auto !important;
  max-width: 130px;
  object-fit: contain;
  display: block;
}
/* Text fallback — animated gradient matching homepage */
.flms-brand-name-link { text-decoration: none; display: flex; align-items: center; flex-shrink: 0; }
.flms-brand-logo-text {
  font-size: 26px; font-weight: 800; letter-spacing: -0.3px;
  background: linear-gradient(90deg, var(--fe-yellow), var(--fe-purple-lt), var(--fe-teal-lt));
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fe-shimmer 4s linear infinite;
  text-align: center;
}
@supports not (-webkit-background-clip: text) {
  .flms-brand-logo-text { -webkit-text-fill-color: unset; color: var(--fe-yellow); }
}
.flms-brand-name {
  font-size: 24px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--fe-yellow-lt), var(--fe-purple-lt), var(--fe-teal-lt));
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fe-shimmer 4s linear infinite;
  text-transform: uppercase;
}
.flms-brand-tagline {
  font-size: 11px; color: #555; letter-spacing: 0.6px;
  font-weight: 500; text-align: left; flex: 1; margin: 0;
  text-transform: none;
}
[data-flms-theme="dark"] .flms-brand-tagline { color: rgba(255,255,255,0.50); }

/* Auth section title */
.flms-auth-section-title {
  font-size: 16px; font-weight: 600; color: var(--fe-text2);
  margin-bottom: 14px; width: 100%; max-width: 600px;
  animation: fe-fadein 0.4s ease;
}

/* Selector grid */
.flms-selector-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%; max-width: 600px; margin-bottom: 24px;
  animation: fe-fadeIn 0.5s ease;
}
.flms-selector-grid.grid-4 { grid-template-columns: 1fr 1fr; }

.flms-sel-card {
  background: rgba(17,24,39,0.65); backdrop-filter: blur(12px);
  border: 2px solid var(--fe-border2);
  border-radius: var(--fe-radius-lg);
  padding: 26px 16px; cursor: pointer; text-align: center;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.flms-sel-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(245,197,24,0.10) 100%);
  transition: opacity 0.25s;
}
.flms-sel-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.flms-sel-card:hover::before { opacity: 1; }
.flms-sel-card.active { border-color: var(--fe-yellow); transform: translateY(-4px); box-shadow: var(--fe-glow-yellow); }
.flms-sel-card.active::before { opacity: 1; }
.flms-sel-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 26px;
  background: var(--fe-navy4); transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.flms-sel-card.active .flms-sel-icon { background: linear-gradient(135deg, var(--fe-yellow) 0%, var(--fe-orange) 100%); color: #fff; transform: scale(1.15) rotate(-5deg); }
.flms-sel-label { font-size: 15px; font-weight: 700; color: var(--fe-text2); }
.flms-sel-sub   { font-size: 12px; color: var(--fe-text3); margin-top: 4px; }
.flms-sel-card.active .flms-sel-label { color: var(--fe-text); }
.flms-sel-card.both-card { grid-column: 1 / -1; }
@media (min-width: 480px) { .flms-selector-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* Login card */
.flms-login-card {
  background: rgba(17,24,39,0.75); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--fe-radius-xl); padding: 30px;
  width: 100%; max-width: 600px;
  box-shadow: var(--fe-shadow-card);
  animation: fe-slideup 0.4s ease;
}
.flms-login-card-title { font-size: 18px; font-weight: 700; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.flms-login-card-title-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }

/* ── FORM ELEMENTS ── */
.flms-form-group { margin-bottom: 16px; position: relative; }
.flms-floating-label { position: relative; background: rgba(34,45,66,0.7); border: 1.5px solid var(--fe-border2); border-radius: 12px; overflow: hidden; }
.flms-floating-label label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--fe-text3); transition: all 0.2s; pointer-events: none; }
.flms-floating-label input:focus ~ label,
.flms-floating-label input:not(:placeholder-shown) ~ label { top: 8px; transform: none; font-size: 10px; color: var(--fe-yellow); }
.flms-floating-label input { background: transparent; border: none; outline: none; padding: 20px 14px 8px; color: var(--fe-text); font-size: 15px; font-family: inherit; width: 100%; }
.flms-floating-label:focus-within { border-color: var(--fe-yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.12); }

.flms-input {
  background: var(--fe-navy3); border: 1.5px solid var(--fe-border2);
  border-radius: 12px; padding: 12px 16px; color: var(--fe-text);
  font-size: 14px; width: 100%; outline: none; font-family: inherit;
  transition: all 0.2s;
}
.flms-input:focus { border-color: var(--fe-yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.12); }
.flms-label { display: block; font-size: 12px; color: var(--fe-text3); margin-bottom: 6px; font-weight: 500; letter-spacing: 0.3px; }
.flms-select {
  background: var(--fe-navy3); border: 1.5px solid var(--fe-border2);
  border-radius: 12px; padding: 12px 16px; color: var(--fe-text);
  font-size: 14px; width: 100%; outline: none; cursor: pointer; font-family: inherit;
  transition: all 0.2s;
}
.flms-select:focus { border-color: var(--fe-yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.12); }
.flms-textarea {
  background: var(--fe-navy3); border: 1.5px solid var(--fe-border2);
  border-radius: 12px; padding: 12px 16px; color: var(--fe-text);
  font-size: 14px; width: 100%; outline: none; resize: vertical;
  font-family: inherit; min-height: 90px; transition: all 0.2s;
}
.flms-textarea:focus { border-color: var(--fe-yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.12); }
.flms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flms-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.flms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
  text-decoration: none; line-height: 1.3; white-space: nowrap;
  position: relative; overflow: hidden;
}
.flms-btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.15s;
}
.flms-btn:hover::after { background: rgba(255,255,255,0.08); }
.flms-btn:active { transform: scale(0.97) !important; }

.flms-btn-primary {
  background: linear-gradient(135deg, var(--fe-yellow) 0%, var(--fe-orange) 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(245,197,24,0.30);
}
.flms-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,197,24,0.45); }

.flms-btn-outline { background: transparent; border: 1.5px solid var(--fe-border2); color: var(--fe-text2); }
.flms-btn-outline:hover { border-color: var(--fe-yellow); color: var(--fe-yellow); background: var(--fe-yellow-bg2); }

.flms-btn-success {
  background: linear-gradient(135deg, var(--fe-success), #16a34a);
  color: #fff; box-shadow: 0 4px 14px rgba(34,197,94,0.30);
}
.flms-btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34,197,94,0.40); }

.flms-btn-danger {
  background: linear-gradient(135deg, var(--fe-danger), #dc2626);
  color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,0.25);
}
.flms-btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239,68,68,0.35); }

.flms-btn-warning { background: linear-gradient(135deg, var(--fe-warning), #d97706); color: #fff; }
.flms-btn-warning:hover { transform: translateY(-2px); }

.flms-btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid var(--fe-border2); color: var(--fe-text2); }
.flms-btn-ghost:hover { background: rgba(255,255,255,0.10); color: var(--fe-text); border-color: var(--fe-border2); }

.flms-btn-purple {
  background: linear-gradient(135deg, var(--fe-purple), var(--fe-pink));
  color: #fff; box-shadow: 0 4px 16px rgba(139,92,246,0.30);
}
.flms-btn-purple:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,92,246,0.45); }

.flms-btn-teal {
  background: linear-gradient(135deg, var(--fe-teal), #0891b2);
  color: #fff; box-shadow: 0 4px 16px rgba(20,184,166,0.30);
}
.flms-btn-teal:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,184,166,0.45); }

.flms-btn-block { width: 100%; }
.flms-btn-sm { padding: 6px 13px; font-size: 12px; border-radius: 8px; }
.flms-btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
.flms-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── SPINNER ── */
.flms-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: currentColor; border-radius: 50%; animation: fe-spin 0.65s linear infinite; }

/* ══════════════════════════════════════════
   ALERTS & BADGES
══════════════════════════════════════════ */
.flms-alert { padding: 12px 16px; border-radius: 12px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; animation: fe-fadein 0.3s ease; }
.flms-alert::before { flex-shrink: 0; font-size: 16px; }
.flms-alert-success { background: var(--fe-success-bg); border: 1px solid rgba(34,197,94,0.25); color: var(--fe-success); }
.flms-alert-success::before { content: '✓'; }
.flms-alert-error, .flms-alert-danger { background: var(--fe-danger-bg); border: 1px solid rgba(239,68,68,0.25); color: var(--fe-danger); }
.flms-alert-error::before, .flms-alert-danger::before { content: '✕'; }
.flms-alert-warning { background: var(--fe-warning-bg); border: 1px solid rgba(245,158,11,0.25); color: var(--fe-warning); }
.flms-alert-warning::before { content: '!'; }
.flms-alert-info { background: var(--fe-info-bg); border: 1px solid rgba(59,130,246,0.25); color: var(--fe-info); }
.flms-alert-info::before { content: 'i'; font-weight: 700; }

.flms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.flms-badge-success { background: var(--fe-success-bg); color: var(--fe-success); }
.flms-badge-danger  { background: var(--fe-danger-bg);  color: var(--fe-danger); }
.flms-badge-warning { background: var(--fe-warning-bg); color: var(--fe-warning); }
.flms-badge-info    { background: var(--fe-info-bg);    color: var(--fe-info); }
.flms-badge-primary { background: var(--fe-yellow-bg);  color: var(--fe-yellow); }
.flms-badge-yellow  { background: var(--fe-yellow); color: #0A0F1E; }
.flms-badge-purple  { background: var(--fe-purple-bg); color: var(--fe-purple-lt); }
.flms-badge-pink    { background: var(--fe-pink-bg);   color: var(--fe-pink-lt); }
.flms-badge-teal    { background: var(--fe-teal-bg);   color: var(--fe-teal-lt); }
.flms-badge-orange  { background: var(--fe-orange-bg); color: var(--fe-orange-lt); }

/* ══════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════ */
.flms-layout { display: flex; min-height: 100vh; }

/* ── SIDEBAR — vibrant with gradient accent ── */
.flms-sidebar {
  width: var(--fe-sidebar-w); flex-shrink: 0;
  background: linear-gradient(180deg, #0E1428 0%, #0A0F1E 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  overflow-y: auto;
}
/* Glowing top strip */
.flms-sidebar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    #F5C518 0%, #F5C518 25%,
    #8B5CF6 25%, #8B5CF6 50%,
    #14B8A6 50%, #14B8A6 75%,
    #EC4899 75%, #EC4899 100%
  );
}

.flms-sidebar-brand { padding: 20px 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.flms-sidebar-brand-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--fe-yellow) 0%, var(--fe-orange) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; font-weight: 800;
  box-shadow: 0 4px 14px rgba(245,197,24,0.35);
  animation: fe-glow-pulse 3s ease-in-out infinite;
}
.flms-sidebar-brand-text { flex: 1; min-width: 0; }
.flms-sidebar-brand-name { font-size: 14px; font-weight: 800; color: var(--fe-text); letter-spacing: 0.5px; line-height: 1.2; }
.flms-sidebar-brand-role { font-size: 10px; color: var(--fe-text3); margin-top: 2px; }

.flms-sidebar-nav { padding: 10px 8px; flex: 1; }
.flms-nav-section { margin-bottom: 18px; }
.flms-nav-section-label { font-size: 9px; color: var(--fe-text3); letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; padding: 0 10px; margin-bottom: 6px; }

.flms-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 13px; cursor: pointer;
  transition: all 0.18s ease;
  font-size: 13px; font-weight: 600;
  text-decoration: none; margin-bottom: 4px;
  border: 1.5px solid transparent; position: relative;
  color: rgba(255,255,255,0.65);
}
/* Solid colour bg per item — dark mode */
.flms-nav-item:nth-child(1) { background: rgba(245,197,24,0.13); border-color: rgba(245,197,24,0.22); color: #FFD740; }
.flms-nav-item:nth-child(2) { background: rgba(139,92,246,0.13); border-color: rgba(139,92,246,0.22); color: #A78BFA; }
.flms-nav-item:nth-child(3) { background: rgba(20,184,166,0.13); border-color: rgba(20,184,166,0.22); color: #2DD4BF; }
.flms-nav-item:nth-child(4) { background: rgba(249,115,22,0.13); border-color: rgba(249,115,22,0.22); color: #FB923C; }
.flms-nav-item:nth-child(5) { background: rgba(59,130,246,0.13); border-color: rgba(59,130,246,0.22); color: #60A5FA; }
.flms-nav-item:nth-child(6) { background: rgba(34,197,94,0.13);  border-color: rgba(34,197,94,0.22);  color: #4ADE80; }
.flms-nav-item:nth-child(7) { background: rgba(236,72,153,0.13); border-color: rgba(236,72,153,0.22); color: #F472B6; }
.flms-nav-item:nth-child(8) { background: rgba(239,68,68,0.13);  border-color: rgba(239,68,68,0.22);  color: #F87171; }

/* Hover — brighter solid */
.flms-nav-item:nth-child(1):hover { background: rgba(245,197,24,0.24); border-color: #F5C518; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(2):hover { background: rgba(139,92,246,0.24); border-color: #8B5CF6; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(3):hover { background: rgba(20,184,166,0.24); border-color: #14B8A6; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(4):hover { background: rgba(249,115,22,0.24); border-color: #F97316; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(5):hover { background: rgba(59,130,246,0.24); border-color: #3B82F6; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(6):hover { background: rgba(34,197,94,0.24);  border-color: #22C55E; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(7):hover { background: rgba(236,72,153,0.24); border-color: #EC4899; color: #fff; transform: translateX(4px); }
.flms-nav-item:nth-child(8):hover { background: rgba(239,68,68,0.24);  border-color: #EF4444; color: #fff; transform: translateX(4px); }

/* Active — fully solid colour, white text */
.flms-nav-item.active { color: #fff !important; transform: translateX(3px); }
.flms-nav-item:nth-child(1).active { background: #F5C518; border-color: #F5C518; box-shadow: 0 4px 14px rgba(245,197,24,0.40); }
.flms-nav-item:nth-child(2).active { background: #8B5CF6; border-color: #8B5CF6; box-shadow: 0 4px 14px rgba(139,92,246,0.40); }
.flms-nav-item:nth-child(3).active { background: #14B8A6; border-color: #14B8A6; box-shadow: 0 4px 14px rgba(20,184,166,0.40); }
.flms-nav-item:nth-child(4).active { background: #F97316; border-color: #F97316; box-shadow: 0 4px 14px rgba(249,115,22,0.40); }
.flms-nav-item:nth-child(5).active { background: #3B82F6; border-color: #3B82F6; box-shadow: 0 4px 14px rgba(59,130,246,0.40); }
.flms-nav-item:nth-child(6).active { background: #22C55E; border-color: #22C55E; box-shadow: 0 4px 14px rgba(34,197,94,0.40); }
.flms-nav-item:nth-child(7).active { background: #EC4899; border-color: #EC4899; box-shadow: 0 4px 14px rgba(236,72,153,0.40); }
.flms-nav-item:nth-child(8).active { background: #EF4444; border-color: #EF4444; box-shadow: 0 4px 14px rgba(239,68,68,0.40); }

/* Nav icon */
.flms-nav-item .nav-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  background: rgba(0,0,0,0.18);
  transition: all 0.18s;
}
.flms-nav-item.active .nav-icon { background: rgba(255,255,255,0.22); }
.flms-nav-item .nav-label { flex: 1; }
.flms-nav-badge { background: linear-gradient(135deg, var(--fe-danger), var(--fe-orange)); color: #fff; border-radius: 20px; padding: 2px 7px; font-size: 10px; font-weight: 700; animation: fe-pulse 2s infinite; }

.flms-sidebar-user { padding: 14px 12px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
.flms-user-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--fe-purple), var(--fe-pink)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.flms-user-info { flex: 1; min-width: 0; }
.flms-user-name { font-size: 13px; font-weight: 600; color: var(--fe-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flms-user-role { font-size: 11px; color: var(--fe-text3); }
.flms-logout-btn { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15); border-radius: 8px; color: var(--fe-text3); cursor: pointer; padding: 7px 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; text-decoration: none; }
.flms-logout-btn:hover { background: var(--fe-danger-bg); border-color: var(--fe-danger); color: var(--fe-danger); }
.flms-logout-btn svg { display: block; }
.flms-nav-logout { color: var(--fe-danger) !important; }
.flms-nav-logout .nav-icon { background: var(--fe-danger-bg) !important; }
.flms-nav-logout:hover { background: var(--fe-danger-bg) !important; }

/* ── MAIN AREA ── */
.flms-main-area { margin-left: var(--fe-sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── TOPBAR — glassmorphism ── */
.flms-topbar {
  background: linear-gradient(90deg, rgba(10,15,30,0.95), rgba(17,24,39,0.95));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 28px; height: var(--fe-header-h);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 90;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  position: relative;
}
/* Solid colour bottom line — segments */
.flms-topbar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    #F5C518 0%, #F5C518 25%,
    #8B5CF6 25%, #8B5CF6 50%,
    #14B8A6 50%, #14B8A6 75%,
    #22C55E 75%, #22C55E 100%
  );
}
.flms-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.flms-topbar-left h1, .flms-topbar-title { font-size: 18px; font-weight: 700; color: var(--fe-text); margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flms-topbar-sub { font-size: 12px; color: var(--fe-text3); margin: 2px 0 0; }
.flms-topbar-right { display: flex; align-items: center; gap: 12px; }
.flms-topbar-date { font-size: 12px; color: var(--fe-text3); }

/* ── PAGE CONTENT ── */
.flms-page-content { padding: 28px; flex: 1; animation: fe-fadein 0.3s ease; }

/* ══════════════════════════════════════════
   STAT CARDS — Colourful with gradients
══════════════════════════════════════════ */
.flms-stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin-bottom: 28px;
}
/* ── STAT CARDS: fully solid colour, works in dark AND light mode ── */
.flms-stat-card {
  border-radius: var(--fe-radius-lg);
  padding: 22px 20px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.22s ease;
  position: relative; overflow: hidden;
  animation: fe-fadein 0.4s ease backwards;
  border: none;
}
/* ── Solid colour classes — !important beats any theme override ── */
.flms-stat-card.sc-yellow { background: #F5C518 !important; }
.flms-stat-card.sc-purple { background: #8B5CF6 !important; }
.flms-stat-card.sc-teal   { background: #14B8A6 !important; }
.flms-stat-card.sc-green  { background: #22C55E !important; }
.flms-stat-card.sc-orange { background: #F97316 !important; }
.flms-stat-card.sc-blue   { background: #3B82F6 !important; }
.flms-stat-card.sc-pink   { background: #EC4899 !important; }
.flms-stat-card.sc-red    { background: #EF4444 !important; }

/* Fallback: no class */
.flms-stat-card { background: #F5C518; }

/* Hover */
.flms-stat-card.sc-yellow:hover { background: #D4A800 !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(245,197,24,0.45); }
.flms-stat-card.sc-purple:hover { background: #7C3AED !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(139,92,246,0.45); }
.flms-stat-card.sc-teal:hover   { background: #0D9488 !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(20,184,166,0.45); }
.flms-stat-card.sc-green:hover  { background: #16A34A !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(34,197,94,0.45); }
.flms-stat-card.sc-orange:hover { background: #EA580C !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(249,115,22,0.45); }
.flms-stat-card.sc-blue:hover   { background: #2563EB !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(59,130,246,0.45); }
.flms-stat-card.sc-pink:hover   { background: #DB2777 !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(236,72,153,0.45); }
.flms-stat-card.sc-red:hover    { background: #DC2626 !important; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(239,68,68,0.45); }

/* All text on stat cards is white — !important beats any theme text override */
.flms-stat-card-body { flex: 1; min-width: 0; }
.flms-stat-card-label { font-size: 11px; color: rgba(255,255,255,0.90) !important; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.6px; }
.flms-stat-card-value { font-size: 34px; font-weight: 800; color: #fff !important; line-height: 1; animation: fe-counter-up 0.5s ease; text-shadow: 0 1px 6px rgba(0,0,0,0.20); }
.flms-stat-card-sub   { font-size: 12px; color: rgba(255,255,255,0.85) !important; margin-top: 6px; }
.flms-stat-card-sub.up   { color: #fff !important; }
.flms-stat-card-sub.down { color: rgba(255,255,255,0.75) !important; }

/* Icon box — white with slight transparency */
.flms-stat-card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
  background: rgba(255,255,255,0.22);
  transition: transform 0.2s;
}
.flms-stat-card:hover .flms-stat-card-icon { transform: scale(1.12) rotate(-6deg); }
/* All icon boxes: white frosted on solid colour cards */
.flms-stat-card-icon.yellow,
.flms-stat-card-icon.purple,
.flms-stat-card-icon.teal,
.flms-stat-card-icon.green,
.flms-stat-card-icon.red,
.flms-stat-card-icon.blue { background: rgba(255,255,255,0.22); }
/* Force white on ALL children of ANY stat card — covers inline styles too */
.flms-stat-card * { color: #fff !important; }
.flms-stat-card .flms-stat-card-label { color: rgba(255,255,255,0.90) !important; }
.flms-stat-card .flms-stat-card-sub   { color: rgba(255,255,255,0.85) !important; }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.flms-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: var(--fe-radius-lg);
  padding: 22px;
  transition: all 0.22s cubic-bezier(0.34,1.3,0.64,1);
  animation: fe-fadein 0.35s ease;
  position: relative; overflow: hidden;
}
/* Shimmer top border */
.flms-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--fe-radius-lg) var(--fe-radius-lg) 0 0;
}
/* Solid colour top bar per card position */
.flms-card:nth-child(1)::before { background: #F5C518; }
.flms-card:nth-child(2)::before { background: #8B5CF6; }
.flms-card:nth-child(3)::before { background: #14B8A6; }
.flms-card:nth-child(4)::before { background: #F97316; }
.flms-card:nth-child(5)::before { background: #3B82F6; }
.flms-card:nth-child(n)::before  { background: #22C55E; }  /* fallback */
.flms-card:hover {
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 8px 32px rgba(0,0,0,0.30);
  transform: translateY(-2px);
}
.flms-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.flms-card-title {
  font-size: 15px; font-weight: 700; color: var(--fe-text);
  display: flex; align-items: center; gap: 8px;
}
.flms-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* Colourful subject / item cards */
.flms-item-card {
  background: var(--fe-navy3);
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius-lg);
  padding: 20px; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34,1.3,0.64,1);
  position: relative; overflow: hidden;
}
.flms-item-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--fe-purple), var(--fe-yellow)); opacity: 0; transition: opacity 0.2s; }
.flms-item-card:hover { border-color: rgba(139,92,246,0.3); transform: translateY(-4px) scale(1.01); box-shadow: 0 12px 32px rgba(0,0,0,0.5), var(--fe-glow-purple); }
.flms-item-card:hover::after { opacity: 1; }
.flms-item-card-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--fe-purple-bg), var(--fe-yellow-bg2)); color: var(--fe-yellow); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; transition: transform 0.2s; }
.flms-item-card:hover .flms-item-card-icon { transform: scale(1.15) rotate(-6deg); }
.flms-item-card-name { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--fe-text); }
.flms-item-card-meta { font-size: 12px; color: var(--fe-text3); }

/* ── PROGRESS BARS ── */
.flms-progress-wrap { margin-top: 12px; }
.flms-progress-bar { background: var(--fe-navy4); border-radius: 6px; height: 8px; overflow: hidden; }
.flms-progress-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--fe-yellow), var(--fe-orange));
  transition: width 0.8s cubic-bezier(0.34,1.3,0.64,1);
  position: relative;
}
.flms-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: fe-shimmer 2s linear infinite; background-size: 200%; }
.flms-progress-fill.green { background: linear-gradient(90deg, var(--fe-teal), var(--fe-success)); }
.flms-progress-fill.red   { background: linear-gradient(90deg, var(--fe-danger), var(--fe-orange)); }
.flms-progress-fill.purple { background: linear-gradient(90deg, var(--fe-purple), var(--fe-pink)); }
.flms-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--fe-text3); margin-top: 5px; }

/* ── TABLES ── */
.flms-table-wrap { overflow-x: auto; border-radius: var(--fe-radius-lg); border: 1px solid var(--fe-border); }
.flms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.flms-table thead { background: linear-gradient(90deg, var(--fe-navy3), var(--fe-navy4)); }
.flms-table th { text-align: left; padding: 13px 16px; color: var(--fe-text3); font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; border-bottom: 1px solid var(--fe-border); }
.flms-table td { padding: 14px 16px; border-bottom: 1px solid var(--fe-border); color: var(--fe-text2); vertical-align: middle; }
.flms-table tbody tr:last-child td { border-bottom: none; }
.flms-table tbody tr { transition: background 0.12s; }
.flms-table tbody tr:hover td { background: rgba(255,255,255,0.03); }
.flms-table .flms-empty { text-align: center; color: var(--fe-text3); padding: 48px; font-size: 14px; }

/* ── TABS ── */
/* .flms-tabs rule moved to tab section above */
.flms-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fe-border); margin-bottom: 22px; background: rgba(255,255,255,0.02); border-radius: 12px 12px 0 0; padding: 4px 4px 0; }
.flms-tab { padding: 10px 18px; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fe-text3); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; transition: all 0.2s; border-radius: 8px 8px 0 0; }
.flms-tab:hover { color: var(--fe-text2); background: rgba(255,255,255,0.06); }
.flms-tab:nth-child(1).active { color: var(--fe-yellow); border-bottom-color: var(--fe-yellow); background: rgba(245,197,24,0.08); }
.flms-tab:nth-child(2).active { color: var(--fe-purple-lt); border-bottom-color: var(--fe-purple); background: rgba(139,92,246,0.08); }
.flms-tab:nth-child(3).active { color: var(--fe-teal-lt);   border-bottom-color: var(--fe-teal);   background: rgba(20,184,166,0.08); }
.flms-tab:nth-child(4).active { color: var(--fe-orange-lt); border-bottom-color: var(--fe-orange); background: rgba(249,115,22,0.08); }
.flms-tab:nth-child(5).active { color: var(--fe-info);      border-bottom-color: var(--fe-info);   background: rgba(59,130,246,0.08); }
/* Generic fallback for any tab beyond 5 */
.flms-tab.active { color: var(--fe-yellow); border-bottom-color: var(--fe-yellow); background: rgba(245,197,24,0.07); }
.flms-tab-panel { display: none; }
.flms-tab-panel.active { display: block; animation: fe-fadein 0.25s ease; }

/* ── SECTION TITLE ── */
.flms-section-title { font-size: 16px; font-weight: 700; color: var(--fe-text); margin-bottom: 16px; }
.flms-panel-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.flms-panel-toolbar .flms-section-title { margin-bottom: 0; }

/* ══════════════════════════════════════════
   LECTURE LIST — Vibrant
══════════════════════════════════════════ */
.flms-lecture-list { display: flex; flex-direction: column; gap: 10px; }
.flms-lecture-row {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(255,255,255,0.02));
  border: 1.5px solid rgba(139,92,246,0.15);
  border-radius: 14px; padding: 14px 18px;
  transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
  animation: fe-slide-in-left 0.3s ease backwards;
}
/* Alternate colours for each row */
.flms-lecture-row:nth-child(2n) { background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(255,255,255,0.02)); border-color: rgba(20,184,166,0.15); }
.flms-lecture-row:nth-child(3n) { background: linear-gradient(135deg, rgba(245,197,24,0.06), rgba(255,255,255,0.02)); border-color: rgba(245,197,24,0.15); }
.flms-lecture-row:hover:not(.flms-locked) { border-color: rgba(139,92,246,0.4); transform: translateX(5px); box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(139,92,246,0.15); }
.flms-lecture-row.flms-locked { opacity: 0.35; pointer-events: none; }
.flms-lecture-num { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.flms-lecture-num.active { background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); color: #fff; box-shadow: 0 4px 14px rgba(245,197,24,0.45); animation: fe-glow-pulse 2s ease infinite; }
.flms-lecture-num.done   { background: linear-gradient(135deg, var(--fe-success), var(--fe-teal)); color: #fff; box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.flms-lecture-num.locked { background: rgba(255,255,255,0.06); color: var(--fe-text3); }
/* Alternating number colours for completed */
.flms-lecture-row:nth-child(4n+1) .flms-lecture-num.done { background: linear-gradient(135deg, var(--fe-purple), var(--fe-pink)); }
.flms-lecture-row:nth-child(4n+2) .flms-lecture-num.done { background: linear-gradient(135deg, var(--fe-teal),   var(--fe-success)); }
.flms-lecture-row:nth-child(4n+3) .flms-lecture-num.done { background: linear-gradient(135deg, var(--fe-info),   var(--fe-purple)); }
.flms-lecture-row:nth-child(4n+0) .flms-lecture-num.done { background: linear-gradient(135deg, var(--fe-orange), var(--fe-yellow)); }
.flms-lecture-info { flex: 1; min-width: 0; }
.flms-lecture-info strong { font-size: 14px; font-weight: 600; display: block; color: var(--fe-text); }
.flms-lecture-meta { font-size: 12px; color: var(--fe-text3); margin-top: 3px; }
.flms-lecture-action { flex-shrink: 0; }

/* ── LECTURE VIDEO VIEW ── */
.flms-lecture-view-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.flms-video-wrap { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--fe-border); box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.flms-video-wrap iframe, .flms-video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.flms-video-meta { margin-top: 16px; }
.flms-video-meta h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.flms-sidebar-lecture { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; transition: all 0.15s; margin-bottom: 6px; }
.flms-sidebar-lecture.current { background: var(--fe-yellow-bg); border-color: rgba(245,197,24,0.2); }
.flms-sidebar-lecture.flms-locked { opacity: 0.35; }
.flms-sidebar-lecture a { text-decoration: none; color: inherit; }

/* ══════════════════════════════════════════
   MODALS — Animated
══════════════════════════════════════════ */
.flms-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.80); backdrop-filter: blur(8px);
  z-index: 9999; align-items: center; justify-content: center; padding: 20px;
}
.flms-modal-overlay.open { display: flex; }
.flms-modal {
  background: linear-gradient(135deg, var(--fe-navy2) 0%, var(--fe-navy3) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--fe-radius-xl); padding: 28px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--fe-shadow-card), 0 0 0 1px rgba(139,92,246,0.10);
  animation: fe-pop 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.flms-modal-lg { max-width: 760px; }
.flms-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.flms-modal-header h3 { font-size: 17px; font-weight: 700; }
.flms-modal-close { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: var(--fe-text3); cursor: pointer; font-size: 16px; padding: 6px 10px; transition: all 0.15s; }
.flms-modal-close:hover { color: var(--fe-danger); background: var(--fe-danger-bg); border-color: var(--fe-danger); }
.flms-modal-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ══════════════════════════════════════════
   QUICK NAV CARDS
══════════════════════════════════════════ */
.flms-quick-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.flms-quick-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--fe-navy2); border: 1px solid var(--fe-border);
  border-radius: 12px; padding: 12px 18px;
  text-decoration: none; color: var(--fe-text2);
  font-size: 13.5px; font-weight: 600;
  transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
}
.flms-quick-card:hover { border-color: var(--fe-yellow); color: var(--fe-yellow); background: var(--fe-yellow-bg2); transform: translateY(-2px); }
.flms-quick-card-icon { font-size: 18px; }

/* ══════════════════════════════════════════
   SCHEDULE ITEMS
══════════════════════════════════════════ */
.flms-schedule-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--fe-border); }
.flms-schedule-item:last-child { border-bottom: none; padding-bottom: 0; }
.flms-schedule-icon { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--fe-purple), var(--fe-pink)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; transition: transform 0.2s; }
.flms-schedule-item:nth-child(2n) .flms-schedule-icon { background: linear-gradient(135deg, var(--fe-teal), var(--fe-info)); }
.flms-schedule-item:nth-child(3n) .flms-schedule-icon { background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); }
.flms-schedule-item:hover .flms-schedule-icon { transform: scale(1.12) rotate(-5deg); }
.flms-schedule-info { flex: 1; min-width: 0; }
.flms-schedule-title { font-size: 14px; font-weight: 600; color: var(--fe-text); }
.flms-schedule-meta  { font-size: 12px; color: var(--fe-text3); }
.flms-schedule-time  { font-size: 12px; color: var(--fe-text3); flex-shrink: 0; }
.flms-schedule-join { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); color: #fff; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; flex-shrink: 0; transition: all 0.15s; }
.flms-schedule-join:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,197,24,0.4); }

/* Live badge */
.flms-live-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(59,130,246,0.15); color: var(--fe-info); border: 1px solid rgba(59,130,246,0.25); border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.flms-live-badge::before { content: '●'; font-size: 8px; animation: fe-pulse 1.5s infinite; }

/* ══════════════════════════════════════════
   CHIPS & SELECTOR
══════════════════════════════════════════ */
.flms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--fe-border2); background: var(--fe-navy3); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1); color: var(--fe-text2); }
.flms-chip:hover { border-color: var(--fe-purple-lt); color: var(--fe-text); transform: translateY(-2px); }
.flms-chip.selected { border-color: var(--fe-yellow); background: var(--fe-yellow-bg); color: var(--fe-yellow); }
.flms-chip small { font-size: 11px; color: var(--fe-text3); }
.flms-chip.selected small { color: rgba(245,197,24,0.7); }

/* ══════════════════════════════════════════
   ONBOARDING STEPS
══════════════════════════════════════════ */
.flms-onboarding-wrap { max-width: 640px; margin: 0 auto; }
.flms-steps-bar { display: flex; align-items: center; margin-bottom: 30px; }
.flms-step-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--fe-border2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--fe-text3); flex-shrink: 0; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.flms-step-dot.active { border: none; background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); color: #fff; box-shadow: var(--fe-glow-yellow); animation: fe-glow-pulse 2s ease infinite; }
.flms-step-dot.done   { border: none; background: linear-gradient(135deg, var(--fe-success), var(--fe-teal)); color: #fff; animation: fe-bounce-in 0.4s ease; }
.flms-step-line { flex: 1; height: 3px; background: var(--fe-border2); margin: 0 10px; border-radius: 2px; overflow: hidden; }
.flms-step-line.done { background: linear-gradient(90deg, var(--fe-success), var(--fe-teal)); }
.flms-step-label { font-size: 11px; color: var(--fe-text3); text-align: center; margin-top: 6px; }
.flms-step-panel { display: none; }
.flms-step-panel.active { display: block; animation: fe-slideup 0.35s ease; }
.flms-panel-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.flms-panel-sub   { font-size: 14px; color: var(--fe-text3); margin-bottom: 24px; }
.flms-panel-actions { display: flex; gap: 10px; margin-top: 24px; }

/* Fee box */
.flms-fee-card { background: var(--fe-navy3); border: 1px solid var(--fe-border2); border-radius: 14px; padding: 18px; margin-bottom: 8px; }
.flms-fee-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--fe-text2); }
.flms-fee-row:last-child { margin-bottom: 0; }
.flms-fee-divider { height: 1px; background: var(--fe-border2); margin: 12px 0; }
.flms-fee-total { font-size: 16px; font-weight: 700; color: var(--fe-text); }
.flms-fee-total .flms-fee-amount { font-size: 24px; color: var(--fe-yellow); }
.flms-fee-preview { background: var(--fe-info-bg); border: 1px solid rgba(59,130,246,0.2); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--fe-info); margin-top: 12px; }

/* Payment options */
.flms-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flms-pay-option { background: var(--fe-navy3); border: 2px solid var(--fe-border); border-radius: 14px; padding: 20px 16px; cursor: pointer; text-align: center; transition: all 0.22s cubic-bezier(0.34,1.3,0.64,1); }
.flms-pay-option:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
.flms-pay-option.selected { border-color: var(--fe-yellow); background: var(--fe-yellow-bg2); box-shadow: var(--fe-glow-yellow); }
.flms-pay-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--fe-navy4); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px; transition: all 0.22s; }
.flms-pay-option.selected .flms-pay-icon { background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); transform: scale(1.1) rotate(-5deg); }
.flms-pay-name { font-size: 14px; font-weight: 700; color: var(--fe-text2); }
.flms-pay-option.selected .flms-pay-name { color: var(--fe-text); }
.flms-pay-details-box { background: var(--fe-success-bg); border: 1px solid rgba(34,197,94,0.2); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--fe-success); margin-top: 16px; }

/* ══════════════════════════════════════════
   QUIZ TAKING — Vibrant
══════════════════════════════════════════ */
.flms-timer-box { background: var(--fe-navy3); border: 1.5px solid var(--fe-border2); border-radius: 12px; padding: 8px 18px; font-size: 24px; font-weight: 800; font-family: 'DM Mono', 'Courier New', monospace; color: var(--fe-text); min-width: 100px; text-align: center; }
.flms-timer-box.warning { border-color: var(--fe-danger); color: var(--fe-danger); background: var(--fe-danger-bg); animation: fe-pulse 1s infinite; }
.flms-question-card { background: linear-gradient(135deg, var(--fe-navy2) 0%, var(--fe-navy3) 100%); border: 1px solid var(--fe-border2); border-radius: 16px; padding: 26px; animation: fe-fadein 0.3s ease; }
.flms-question-text {
  font-size: 17px; font-weight: 600; margin-bottom: 22px; line-height: 1.75;
  font-family: 'DM Sans','Segoe UI',system-ui,sans-serif !important;
  font-style: normal !important;
}
/* Plain text inside questions — solid readable style */
.q-plain-text {
  font-family: 'DM Sans','Segoe UI',system-ui,sans-serif !important;
  font-style: normal !important;
  color: var(--fe-text);
  font-size: inherit;
  letter-spacing: 0;
  word-spacing: normal;
}
.flms-option-label {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; background: var(--fe-navy3);
  border: 2px solid var(--fe-border); border-radius: 14px;
  cursor: pointer; margin-bottom: 10px;
  transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
}
.flms-option-label:hover { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.06); transform: translateX(4px); }
.flms-option-label input[type=radio] { flex-shrink: 0; margin-top: 2px; accent-color: var(--fe-yellow); width: 18px; height: 18px; }
.flms-option-label.selected { border-color: var(--fe-yellow); background: var(--fe-yellow-bg); box-shadow: 0 0 0 1px rgba(245,197,24,0.2); }
.flms-option-label.correct  { border-color: var(--fe-success); background: var(--fe-success-bg); }
.flms-option-label.wrong    { border-color: var(--fe-danger);  background: var(--fe-danger-bg); }
.flms-essay-area { width: 100%; min-height: 160px; resize: vertical; background: var(--fe-navy2); border: 1.5px solid var(--fe-border2); border-radius: 12px; padding: 14px; color: var(--fe-text); font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s; }
.flms-essay-area:focus { border-color: var(--fe-yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.12); }
.flms-quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Score banner */
.flms-score-banner { text-align: center; padding: 36px; background: linear-gradient(135deg, var(--fe-navy2), var(--fe-navy3)); border-radius: 18px; margin-bottom: 22px; border: 1px solid var(--fe-border); position: relative; overflow: hidden; }
.flms-score-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(139,92,246,0.12) 0%, transparent 70%); }
.flms-score-number { font-size: 64px; font-weight: 800; line-height: 1; background: linear-gradient(90deg, var(--fe-yellow), var(--fe-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fe-bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.flms-result-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--fe-navy3); border-radius: 12px; margin-bottom: 10px; border-left: 4px solid var(--fe-border); animation: fe-fadein 0.3s ease; }
.flms-result-row.correct { border-left-color: var(--fe-success); }
.flms-result-row.wrong   { border-left-color: var(--fe-danger); }
.flms-result-row.essay   { border-left-color: var(--fe-info); }

/* ══════════════════════════════════════════
   QUIZ BUILDER (CT)
══════════════════════════════════════════ */
.flms-question-built { background: var(--fe-navy3); border: 1px solid var(--fe-border); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; transition: border-color 0.15s; animation: fe-slide-in-left 0.3s ease; }
.flms-question-built:hover { border-color: rgba(139,92,246,0.3); }
.flms-question-built-body { flex: 1; min-width: 0; }
.flms-question-built-num { font-size: 11px; color: var(--fe-text3); margin-bottom: 4px; font-weight: 600; }
.flms-question-built-text { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.flms-question-built-opts { font-size: 12px; color: var(--fe-text3); }
.correct-opt { color: var(--fe-success); font-weight: 700; }
.flms-option-builder-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.flms-option-builder-row input[type=radio] { flex-shrink: 0; accent-color: var(--fe-yellow); width: 18px; height: 18px; cursor: pointer; }

/* MCQ option with equation preview */
.eq-option-row { align-items: flex-start; }
.eq-option-input-wrap { flex: 1; min-width: 0; }
.eq-option-input-wrap .flms-input { width: 100%; }
.eq-option-preview {
  display: none;
  background: var(--fe-navy3);
  border: 1px solid var(--fe-yellow);
  border-radius: 8px;
  padding: 6px 12px;
  margin-top: 5px;
  font-size: 15px;
  overflow-x: auto;
}
.eq-option-preview .katex { font-size: 1.1em; }
.flms-essay-answer-box { background: var(--fe-navy2); border: 1px solid var(--fe-border); border-radius: 10px; padding: 12px; font-size: 13px; margin: 8px 0; line-height: 1.6; color: var(--fe-text2); }

/* ══════════════════════════════════════════
   PROFILE AVATAR
══════════════════════════════════════════ */
.flms-avatar-circle { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--fe-purple), var(--fe-pink)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }

/* ── DIVIDER ── */
.flms-divider { height: 1px; background: var(--fe-border); margin: 20px 0; }

/* ── TEXT HELPERS ── */
.flms-text-muted   { color: var(--fe-text3) !important; }
.flms-text-primary { color: var(--fe-yellow) !important; }
.flms-text-success { color: var(--fe-success) !important; }
.flms-text-warning { color: var(--fe-warning) !important; }
.flms-text-danger  { color: var(--fe-danger)  !important; }
.flms-empty { color: var(--fe-text3); text-align: center; padding: 48px; font-size: 14px; }

/* ══════════════════════════════════════════
   THEME SWITCHER
══════════════════════════════════════════ */
.flms-theme-switcher { display: inline-flex; align-items: center; background: rgba(255,255,255,0.06); border: 1.5px solid var(--fe-border2); border-radius: 24px; padding: 3px; gap: 2px; cursor: pointer; flex-shrink: 0; }
.flms-theme-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; border: none; background: transparent; color: var(--fe-text3); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.flms-theme-btn.active { background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); color: #fff; box-shadow: 0 2px 8px rgba(245,197,24,0.3); }
.flms-sidebar-toggle { background: none; border: 1px solid var(--fe-border2); border-radius: 8px; color: var(--fe-text3); cursor: pointer; padding: 6px 8px; display: none; align-items: center; transition: all 0.15s; flex-shrink: 0; }
.flms-sidebar-toggle:hover { border-color: var(--fe-yellow); color: var(--fe-yellow); }

/* ══════════════════════════════════════════
   LATEX / EQUATION
══════════════════════════════════════════ */
.flms-question-text .katex { font-size: 1.05em; }
.flms-latex-preview { background: var(--fe-navy3); border: 1px solid var(--fe-border2); border-radius: 10px; padding: 12px 16px; margin-top: 8px; min-height: 36px; font-size: 15px; overflow-x: auto; }
.flms-latex-preview.error { border-color: var(--fe-danger); color: var(--fe-danger); font-size: 12px; }
.flms-question-img { max-width: 100%; max-height: 320px; border-radius: 12px; border: 1px solid var(--fe-border2); margin: 12px 0; display: block; object-fit: contain; background: var(--fe-navy2); }
.flms-img-upload-area { border: 2px dashed var(--fe-border2); border-radius: 14px; padding: 22px; text-align: center; cursor: pointer; transition: all 0.2s; color: var(--fe-text3); font-size: 13px; }
.flms-img-upload-area:hover, .flms-img-upload-area.drag { border-color: var(--fe-yellow); color: var(--fe-text2); background: var(--fe-yellow-bg2); }
.flms-img-upload-area input[type=file] { display: none; }

/* Rich question type tabs */
.flms-qtype-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.flms-qtype-tab { padding: 7px 14px; border-radius: 8px; border: 1.5px solid var(--fe-border2); background: var(--fe-navy3); color: var(--fe-text3); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.18s; font-family: inherit; }
.flms-qtype-tab:hover { border-color: var(--fe-purple-lt); color: var(--fe-text2); background: var(--fe-purple-bg); }
.flms-qtype-tab.active { background: linear-gradient(135deg, var(--fe-purple-bg), var(--fe-yellow-bg2)); border-color: var(--fe-purple-lt); color: var(--fe-purple-lt); }

/* ══════════════════════════════════════════
   EQUATION BUILDER
══════════════════════════════════════════ */
.eq-palette { background: var(--fe-navy3); border: 1px solid var(--fe-border2); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.eq-pal-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; border-bottom: 1px solid var(--fe-border); padding-bottom: 8px; }
.eq-pal-tab { padding: 5px 12px; border-radius: 6px; border: none; background: transparent; color: var(--fe-text3); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.eq-pal-tab:hover  { color: var(--fe-text); background: rgba(255,255,255,0.06); }
.eq-pal-tab.active { background: linear-gradient(135deg, var(--fe-yellow), var(--fe-orange)); color: #fff; box-shadow: 0 2px 8px rgba(245,197,24,0.3); }
.eq-pal-group { display: flex; flex-wrap: wrap; gap: 5px; }
.eq-sym-btn { padding: 5px 10px; border: 1px solid var(--fe-border2); border-radius: 7px; background: var(--fe-navy2); color: var(--fe-text2); font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.eq-sym-btn:hover { border-color: var(--fe-yellow); background: var(--fe-yellow-bg); color: var(--fe-text); transform: translateY(-1px); }
.eq-sym-btn-wide { min-width: 90px; text-align: center; }
.eq-split-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eq-pane-label { font-size: 11px; font-weight: 700; color: var(--fe-text3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.eq-source-pane, .eq-preview-pane { display: flex; flex-direction: column; }
.eq-source-textarea { flex: 1; font-family: 'DM Mono','Courier New',monospace !important; font-size: 13px !important; line-height: 1.6; min-height: 130px; }
.eq-source-hint, .eq-preview-hint { font-size: 11px; color: var(--fe-text3); margin-top: 5px; }
.eq-source-hint code { background: var(--fe-navy3); padding: 1px 5px; border-radius: 4px; font-size: 11px; color: var(--fe-yellow); }
.eq-rendered-preview { flex: 1; background: var(--fe-navy2); border: 2.5px solid var(--fe-yellow); border-radius: 14px; padding: 24px 20px; min-height: 160px; overflow-x: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 20px; line-height: 2; box-shadow: var(--fe-glow-yellow); }
.eq-rendered-preview .katex { font-size: 1.4em !important; }
.eq-rendered-preview .katex-display { margin: 10px 0; font-size: 1.6em; }
.eq-rendered-preview .katex-display > .katex { font-size: 1.6em !important; }
.eq-preview-placeholder { color: var(--fe-text3); font-size: 13px; text-align: center; width: 100%; }
.eq-rendered-preview.has-error { border-color: var(--fe-danger); background: var(--fe-danger-bg); font-size: 14px; box-shadow: none; }
.eq-render-error { color: var(--fe-danger); font-size: 12px; font-family: monospace; white-space: pre-wrap; }
.eq-rendered-preview span:not(.eq-preview-placeholder):not(.eq-render-error) { font-size: 18px; color: var(--fe-text); }
.eq-rendered-student { font-size: 17px; line-height: 1.9; margin-bottom: 18px; }
.eq-rendered-student .katex { font-size: 1.2em; }
.eq-rendered-student .katex-display { margin: 12px 0; text-align: center; }
.eq-rendered-student .katex-display > .katex { font-size: 1.35em; }
.flms-option-label .opt-text .katex { font-size: 1.1em; vertical-align: middle; }

/* ══════════════════════════════════════════
   MT DASHBOARD TEACHER PERF CARDS
══════════════════════════════════════════ */
.flms-teacher-perf-card { background: var(--fe-navy2); border: 1px solid var(--fe-border); border-radius: 16px; padding: 18px; transition: all 0.25s cubic-bezier(0.34,1.3,0.64,1); cursor: pointer; position: relative; overflow: hidden; }
.flms-teacher-perf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--fe-purple), var(--fe-yellow), var(--fe-teal)); opacity: 0; transition: opacity 0.2s; }
.flms-teacher-perf-card:hover { border-color: rgba(139,92,246,0.35); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.4), var(--fe-glow-purple); }
.flms-teacher-perf-card:hover::before { opacity: 1; }
.flms-teacher-perf-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.flms-teacher-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; background: linear-gradient(135deg, var(--fe-purple-bg), var(--fe-yellow-bg)); color: var(--fe-yellow); }
.flms-teacher-perf-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.flms-tps { text-align: center; background: var(--fe-navy3); border-radius: 10px; padding: 8px 4px; }
.flms-tps-val { font-size: 20px; font-weight: 800; color: var(--fe-text); }
.flms-tps-lbl { font-size: 10px; color: var(--fe-text3); margin-top: 2px; }

/* MT Activity Log */
.mt-tab { animation: fe-fadein 0.22s ease; }
.mt-log-date-divider { font-size: 11px; font-weight: 700; color: var(--fe-text3); text-transform: uppercase; letter-spacing: .8px; padding: 16px 0 8px; border-bottom: 1px solid var(--fe-border); margin-bottom: 8px; }
.mt-log-entry { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 12px; margin-bottom: 6px; background: var(--fe-navy2); border: 1px solid var(--fe-border); transition: all 0.15s; }
.mt-log-entry:hover { border-color: var(--fe-border2); transform: translateX(3px); }
.mt-log-entry.hidden { display: none; }
.mt-log-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.mt-log-body { flex: 1; min-width: 0; }
.mt-log-title { font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-log-meta  { font-size: 12px; color: var(--fe-text3); }
.mt-log-time  { font-size: 11px; color: var(--fe-text3); white-space: nowrap; flex-shrink: 0; }
#teacher-detail-panel { background: linear-gradient(135deg, var(--fe-navy2), var(--fe-navy3)); border: 1.5px solid var(--fe-yellow); border-radius: 16px; padding: 22px; box-shadow: var(--fe-glow-yellow); animation: fe-fadein 0.25s ease; }

/* CT tab animation */
.ct-tab { animation: fe-fadein 0.22s ease; }
.ct-tab-panel { display: none; }
.ct-tab-panel:first-child { display: block; }

/* ══════════════════════════════════════════
   FULL-PAGE OVERRIDES
══════════════════════════════════════════ */
.flms-full-page { margin: 0 !important; padding: 0 !important; background: var(--fe-navy) !important; }
.flms-full-page .entry-title, .flms-full-page .page-title, .flms-full-page h1.wp-block-post-title,
.flms-full-page .wp-post-image, .flms-full-page .post-thumbnail, .flms-full-page #page-title,
.flms-full-page .breadcrumbs, .flms-full-page .site-breadcrumb { display: none !important; }
.flms-full-page #wpadminbar { display: none !important; }
.flms-full-page html { margin-top: 0 !important; }
.flms-dash-wrap { font-family: 'DM Sans','Segoe UI',system-ui,sans-serif; color: var(--fe-text); max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; }
#flmsSidebarOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 199; }

/* Sidebar brand link */
.flms-sidebar-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/* ══════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   LIGHT THEME — Clean, professional, readable
   Main bg: soft blue-grey | Cards: white
   Sidebar: always dark | Stat cards: solid bold (same as dark)
══════════════════════════════════════════ */
[data-flms-theme="light"] {
  /* Backgrounds */
  --fe-navy:        #EEF2F9;   /* page bg — soft blue-grey */
  --fe-navy2:       #FFFFFF;   /* card bg — white */
  --fe-navy3:       #F4F6FC;   /* subtle tint */
  --fe-navy4:       #E8EDF8;
  --fe-navy5:       #D8E0F2;
  /* Keep real accent colours — DO NOT remap yellow to purple */
  --fe-yellow:      #F5C518;
  --fe-yellow-dk:   #D4A800;
  --fe-yellow-lt:   #FFD740;
  --fe-yellow-bg:   rgba(245,197,24,0.12);
  --fe-yellow-bg2:  rgba(245,197,24,0.07);
  /* Text — dark for light bg */
  --fe-text:        #111827;
  --fe-text2:       #374151;
  --fe-text3:       #6B7280;
  /* Borders */
  --fe-border:      rgba(0,0,0,0.08);
  --fe-border2:     rgba(0,0,0,0.13);
  /* Shadows */
  --fe-shadow:      0 2px 12px rgba(0,0,0,0.09);
  --fe-shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --fe-shadow-card: 0 4px 24px rgba(0,0,0,0.10);
}

/* ── Layout ── */
[data-flms-theme="light"] .flms-layout  { background: #EEF2F9; color: #111827; }
[data-flms-theme="light"] .flms-main-area { background: #EEF2F9; }
[data-flms-theme="light"] .flms-page-content { background: #EEF2F9; }

/* ── Sidebar — always dark regardless of theme ── */
[data-flms-theme="light"] .flms-sidebar {
  background: #1A1F35;
  border-right: 1px solid rgba(255,255,255,0.07);
}
[data-flms-theme="light"] .flms-sidebar-brand { border-bottom-color: rgba(255,255,255,0.08); }
[data-flms-theme="light"] .flms-sidebar-user  {
  border-top-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
[data-flms-theme="light"] .flms-sidebar-brand-name { color: #fff; }
[data-flms-theme="light"] .flms-sidebar-brand-role { color: rgba(255,255,255,0.55); }
[data-flms-theme="light"] .flms-nav-section-label  { color: rgba(255,255,255,0.40); }
/* User info — always visible against the dark sidebar */
[data-flms-theme="light"] .flms-user-name  { color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
[data-flms-theme="light"] .flms-user-role  { color: rgba(255,255,255,0.80) !important; }
[data-flms-theme="light"] .flms-user-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }

/* ── Nav items — sidebar is always dark #1A1F35 in light mode — SOLID backgrounds ── */
/* Rest state: fully solid coloured backgrounds — clearly visible buttons */
[data-flms-theme="light"] .flms-nav-item:nth-child(1) { background: rgba(245,197,24,0.28);  border-color: #F5C518;  color: #FFD740; }
[data-flms-theme="light"] .flms-nav-item:nth-child(2) { background: rgba(139,92,246,0.28);  border-color: #8B5CF6;  color: #C4B5FD; }
[data-flms-theme="light"] .flms-nav-item:nth-child(3) { background: rgba(20,184,166,0.28);  border-color: #14B8A6;  color: #5EEAD4; }
[data-flms-theme="light"] .flms-nav-item:nth-child(4) { background: rgba(249,115,22,0.28);  border-color: #F97316;  color: #FDBA74; }
[data-flms-theme="light"] .flms-nav-item:nth-child(5) { background: rgba(59,130,246,0.28);  border-color: #3B82F6;  color: #93C5FD; }
[data-flms-theme="light"] .flms-nav-item:nth-child(6) { background: rgba(34,197,94,0.28);   border-color: #22C55E;  color: #86EFAC; }
[data-flms-theme="light"] .flms-nav-item:nth-child(7) { background: rgba(236,72,153,0.28);  border-color: #EC4899;  color: #F9A8D4; }
[data-flms-theme="light"] .flms-nav-item:nth-child(8) { background: rgba(239,68,68,0.28);   border-color: #EF4444;  color: #FCA5A5; }

/* Hover: bright solid — white text on full-opacity colour */
[data-flms-theme="light"] .flms-nav-item:nth-child(1):hover { background: #D4A800;  border-color: #F5C518; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(2):hover { background: #7C3AED;  border-color: #8B5CF6; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(3):hover { background: #0D9488;  border-color: #14B8A6; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(4):hover { background: #EA6A0E;  border-color: #F97316; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(5):hover { background: #2563EB;  border-color: #3B82F6; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(6):hover { background: #16A34A;  border-color: #22C55E; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(7):hover { background: #BE185D;  border-color: #EC4899; color: #fff; transform: translateX(4px); }
[data-flms-theme="light"] .flms-nav-item:nth-child(8):hover { background: #DC2626;  border-color: #EF4444; color: #fff; transform: translateX(4px); }

/* Active: fully solid, white text — same as dark mode */
/* Nav items — always inherit their nth-child colour, never overridden by card rules */
[data-flms-theme="light"] .flms-nav-item .nav-label { color: inherit !important; }
[data-flms-theme="light"] .flms-nav-item .nav-icon  { color: inherit !important; }
[data-flms-theme="light"] .flms-nav-item span       { color: inherit !important; }
/* Active nav — white text on solid colour bg */
[data-flms-theme="light"] .flms-nav-item.active                { color: #fff !important; }
[data-flms-theme="light"] .flms-nav-item.active .nav-label     { color: #fff !important; }
[data-flms-theme="light"] .flms-nav-item.active .nav-icon      { background: rgba(255,255,255,0.22) !important; color: #fff !important; }
[data-flms-theme="light"] .flms-nav-item.active span           { color: #fff !important; }
[data-flms-theme="light"] .flms-nav-item .nav-label { color: inherit; }

/* ── Topbar ── */
[data-flms-theme="light"] .flms-topbar {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
[data-flms-theme="light"] .flms-topbar-title,
[data-flms-theme="light"] .flms-topbar-left h1 { color: #111827; }
[data-flms-theme="light"] .flms-topbar-sub,
[data-flms-theme="light"] .flms-topbar-date { color: #6B7280; }

/* ── Stat cards — reinforce solid colours in light mode with !important ── */
/* Belt AND suspenders: explicit light-mode rules for each colour class */
[data-flms-theme="light"] .flms-stat-card.sc-yellow { background: #F5C518 !important; }
[data-flms-theme="light"] .flms-stat-card.sc-purple { background: #8B5CF6 !important; }
[data-flms-theme="light"] .flms-stat-card.sc-teal   { background: #14B8A6 !important; }
[data-flms-theme="light"] .flms-stat-card.sc-green  { background: #22C55E !important; }
[data-flms-theme="light"] .flms-stat-card.sc-orange { background: #F97316 !important; }
[data-flms-theme="light"] .flms-stat-card.sc-blue   { background: #3B82F6 !important; }
[data-flms-theme="light"] .flms-stat-card.sc-pink   { background: #EC4899 !important; }
[data-flms-theme="light"] .flms-stat-card.sc-red    { background: #EF4444 !important; }
[data-flms-theme="light"] .flms-stat-card *          { color: #fff !important; }
[data-flms-theme="light"] .flms-stat-card .flms-stat-card-label { color: rgba(255,255,255,0.90) !important; }
[data-flms-theme="light"] .flms-stat-card .flms-stat-card-sub   { color: rgba(255,255,255,0.85) !important; }

/* ── Regular cards ── */
[data-flms-theme="light"] .flms-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-flms-theme="light"] .flms-card:hover {
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 4px 18px rgba(0,0,0,0.11);
}
[data-flms-theme="light"] .flms-card-title { color: #111827; }

/* ── Tables ── */
[data-flms-theme="light"] .flms-table-wrap { border-color: rgba(0,0,0,0.09); }
[data-flms-theme="light"] .flms-table thead { background: #F4F6FC; }
[data-flms-theme="light"] .flms-table th { color: #6B7280; border-bottom-color: rgba(0,0,0,0.09); }
[data-flms-theme="light"] .flms-table td { color: #374151; border-bottom-color: rgba(0,0,0,0.06); }
[data-flms-theme="light"] .flms-table tbody tr:hover td { background: #F8FAFF; }

/* ── Forms ── */
[data-flms-theme="light"] .flms-input,
[data-flms-theme="light"] .flms-select,
[data-flms-theme="light"] .flms-textarea {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.14);
  color: #111827;
}
[data-flms-theme="light"] .flms-input:focus,
[data-flms-theme="light"] .flms-select:focus,
[data-flms-theme="light"] .flms-textarea:focus {
  border-color: #F5C518;
  box-shadow: 0 0 0 3px rgba(245,197,24,0.15);
}
[data-flms-theme="light"] .flms-label { color: #374151; }

/* ── Lecture rows ── */
[data-flms-theme="light"] .flms-lecture-row { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-flms-theme="light"] .flms-lecture-row:hover:not(.flms-locked) { border-color: rgba(139,92,246,0.35); box-shadow: 0 2px 12px rgba(0,0,0,0.10); }

/* ── Progress bars ── */
[data-flms-theme="light"] .flms-progress-bar { background: #E5E7EB; }

/* ── Modals ── */
[data-flms-theme="light"] .flms-modal { background: #FFFFFF; border-color: rgba(0,0,0,0.10); }
[data-flms-theme="light"] .flms-modal-close { background: #F4F6FC; border-color: rgba(0,0,0,0.10); color: #374151; }

/* ── Schedule items ── */
[data-flms-theme="light"] .flms-schedule-item { border-bottom-color: rgba(0,0,0,0.07); }

/* ── Section title ── */
[data-flms-theme="light"] .flms-section-title { color: #111827; }

/* ── Text helpers ── */
[data-flms-theme="light"] .flms-text-muted  { color: #6B7280 !important; }
[data-flms-theme="light"] .flms-empty { color: #9CA3AF; }

/* ── Tabs ── */
[data-flms-theme="light"] .flms-tabs { border-bottom-color: rgba(0,0,0,0.09); background: #F4F6FC; }
[data-flms-theme="light"] .flms-tab  { color: #6B7280; }
[data-flms-theme="light"] .flms-tab:hover { background: #E8EDF8; color: #374151; }

/* ── Quiz ── */
[data-flms-theme="light"] .flms-question-card  { background: #FFFFFF; border-color: rgba(0,0,0,0.09); }
[data-flms-theme="light"] .flms-option-label   { background: #F4F6FC; border-color: rgba(0,0,0,0.09); color: #111827; }
[data-flms-theme="light"] .flms-option-label:hover { border-color: rgba(139,92,246,0.4); background: #EEF0FF; }
[data-flms-theme="light"] .flms-option-label.selected { border-color: #F5C518; background: rgba(245,197,24,0.08); }
[data-flms-theme="light"] .flms-essay-area { background: #FFFFFF; color: #111827; border-color: rgba(0,0,0,0.12); }
[data-flms-theme="light"] .flms-question-text { color: #111827; }

/* ── Buttons ── */
[data-flms-theme="light"] .flms-btn-primary { color: #fff; }
[data-flms-theme="light"] .flms-btn-ghost { background: #F4F6FC; border-color: rgba(0,0,0,0.12); color: #374151; }
[data-flms-theme="light"] .flms-btn-ghost:hover { background: #E8EDF8; }
[data-flms-theme="light"] .flms-btn-outline { border-color: rgba(0,0,0,0.14); color: #374151; }
[data-flms-theme="light"] .flms-btn-outline:hover { border-color: #F5C518; color: #D4A800; background: rgba(245,197,24,0.07); }

/* ── Badges ── */
[data-flms-theme="light"] .flms-badge-primary { background: rgba(245,197,24,0.15); color: #D4A800; }

/* ── Auth pages ── */
[data-flms-theme="light"] .flms-auth-page { background: #EEF2F9; }
[data-flms-theme="light"] .flms-brand-header { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.08); }
[data-flms-theme="light"] .flms-brand-tagline { color: #6B7280; }
[data-flms-theme="light"] .flms-login-card { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.09); }
[data-flms-theme="light"] .flms-sel-card { background: #FFFFFF; border-color: rgba(0,0,0,0.09); }

/* ── Theme switcher ── */
[data-flms-theme="light"] .flms-theme-switcher { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); }
[data-flms-theme="light"] .flms-theme-btn { color: #374151; }
[data-flms-theme="light"] .flms-theme-btn.active { background: #F5C518; color: #fff; box-shadow: 0 2px 8px rgba(245,197,24,0.3); }

/* ── Equation builder ── */
[data-flms-theme="light"] .eq-sym-btn { background: #FFFFFF; color: #374151; border-color: rgba(0,0,0,0.12); }
[data-flms-theme="light"] .eq-rendered-preview { background: #FFFFFF; border-color: #F5C518; }
[data-flms-theme="light"] .eq-palette { background: #F4F6FC; border-color: rgba(0,0,0,0.09); }

/* ── User avatar ── */
[data-flms-theme="light"] .flms-user-avatar { color: #fff; }

/* ══════════════════════════════════════════
   LIGHT MODE: Force dark text on all content
   so nothing is invisible on white backgrounds
══════════════════════════════════════════ */
/* Card body text — targeted, NOT using broad div/span selectors */
[data-flms-theme="light"] .flms-card       { color: #111827; }
[data-flms-theme="light"] .flms-card-header { color: #111827; }
[data-flms-theme="light"] .flms-card-title  { color: #111827 !important; }
[data-flms-theme="light"] .flms-card > p,
[data-flms-theme="light"] .flms-card-body > p { color: #374151; }
/* Specific text helpers inside cards */
[data-flms-theme="light"] .flms-card .flms-text-muted  { color: #6B7280 !important; }
[data-flms-theme="light"] .flms-card .flms-section-title { color: #111827; }
/* NEVER touch nav items — sidebar stays dark, nav text must be light */
[data-flms-theme="light"] .flms-nav-item,
[data-flms-theme="light"] .flms-nav-item .nav-label,
[data-flms-theme="light"] .flms-nav-item .nav-icon,
[data-flms-theme="light"] .flms-nav-item span { color: inherit !important; }

/* Lecture rows */
[data-flms-theme="light"] .flms-lecture-info strong { color: #111827; }
[data-flms-theme="light"] .flms-lecture-meta { color: #6B7280; }

/* Section headings */
[data-flms-theme="light"] .flms-section-title { color: #111827; }
[data-flms-theme="light"] .flms-panel-toolbar .flms-section-title { color: #111827; }

/* Schedule items */
[data-flms-theme="light"] .flms-schedule-title { color: #111827; }
[data-flms-theme="light"] .flms-schedule-meta  { color: #6B7280; }
[data-flms-theme="light"] .flms-schedule-time  { color: #6B7280; }

/* Empty states */
[data-flms-theme="light"] .flms-empty  { color: #9CA3AF; }
[data-flms-theme="light"] .flms-text-muted { color: #6B7280 !important; }

/* Progress labels */
[data-flms-theme="light"] .flms-progress-label { color: #374151; }

/* Attendance attendance card big number — hardcoded now, ignore */
/* Item card names */
[data-flms-theme="light"] .flms-item-card-name { color: #111827; }
[data-flms-theme="light"] .flms-item-card-meta { color: #6B7280; }

/* Teacher perf cards */
[data-flms-theme="light"] .flms-teacher-perf-card   { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-flms-theme="light"] .flms-tps-val             { color: #111827; }
[data-flms-theme="light"] .flms-tps-lbl             { color: #6B7280; }

/* Quick nav cards */
[data-flms-theme="light"] .flms-quick-card { background: #fff; border-color: rgba(0,0,0,0.08); color: #374151; }
[data-flms-theme="light"] .flms-quick-card:hover { background: #F4F6FC; border-color: #F5C518; color: #D4A800; }

/* Attendance log table header */
[data-flms-theme="light"] .flms-table th { color: #374151 !important; }
[data-flms-theme="light"] .flms-table td { color: #111827 !important; }

/* ══════════════════════════════════════════
   RESPONSIVE — v3.0
══════════════════════════════════════════ */
/* Tablet ≤900px */
@media (max-width: 900px) {
  .flms-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.34,1.3,0.64,1); z-index: 200; width: 270px; }
  .flms-sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,0.6); }
  .flms-sidebar-toggle { display: inline-flex !important; }
  .flms-main-area { margin-left: 0 !important; }
  .flms-lecture-view-grid { grid-template-columns: 1fr; }
  .flms-grid-2.quiz-builder-grid { grid-template-columns: 1fr; }
}
/* Mobile ≤600px */
@media (max-width: 600px) {
  .flms-topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .flms-topbar-left { gap: 8px; min-width: 0; }
  .flms-topbar-title { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .flms-topbar-sub { display: none; }
  .flms-topbar-date { display: none !important; }
  .flms-theme-label-txt { display: none; }
  .flms-theme-switcher { gap: 2px; padding: 2px; }
  .flms-theme-btn { padding: 4px 8px; font-size: 13px; }
  .flms-page-content { padding: 14px 12px 80px; }
  .flms-grid-2, .flms-grid-3, .flms-grid-4 { grid-template-columns: 1fr !important; }
  .flms-stats-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .flms-stat-card { padding: 16px; border-radius: 14px; }
  .flms-stat-card-value { font-size: 26px; color: #fff !important; }
  .flms-stat-card-label { color: rgba(255,255,255,0.90) !important; }
  .flms-stat-card-sub   { color: rgba(255,255,255,0.85) !important; }
  .flms-pay-grid { grid-template-columns: 1fr 1fr; }
  .flms-selector-grid { grid-template-columns: 1fr !important; }
  .flms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .flms-table { min-width: 520px; }
  .flms-table th, .flms-table td { padding: 10px 12px; font-size: 13px; }
  .flms-card { padding: 16px; }
  .flms-card-header { flex-wrap: wrap; gap: 8px; }
  .flms-modal { width: 100% !important; max-width: 100% !important; max-height: 90vh; overflow-y: auto; border-radius: 20px 20px 0 0; margin-top: auto; }
  .flms-modal-overlay { align-items: flex-end !important; }
  .flms-btn { font-size: 13px; }
  .flms-btn-primary, .flms-btn-success, .flms-btn-ghost { min-height: 40px; }
  .flms-qtype-tabs { gap: 4px; }
  .flms-qtype-tab { padding: 6px 10px; font-size: 11px; }
  .flms-option-builder-row { flex-wrap: wrap; }
  .flms-step-dot { width: 30px; height: 30px; font-size: 12px; }
  .ct-nav { gap: 2px; }
  .ct-nav-btn { padding: 8px 10px; font-size: 12px; }
  .flms-attend-card { padding: 14px; }
  .eq-split-pane { grid-template-columns: 1fr; }
  .flms-teacher-perf-stats { grid-template-columns: repeat(4,1fr); }
}
/* XS ≤400px */
@media (max-width: 400px) {
  .flms-topbar-title { max-width: 120px; font-size: 14px !important; }
  .flms-stats-row { grid-template-columns: 1fr !important; }
  .flms-stat-card-value { font-size: 24px; }
  .flms-pay-grid { grid-template-columns: 1fr; }
  .flms-page-content { padding: 12px 10px 80px; }
  .flms-theme-btn { padding: 3px 7px; }
}

/* ══════════════════════════════════════════
   FOCUS AI — Chat Interface
══════════════════════════════════════════ */

/* Sidebar AI nav item */
.flms-nav-ai { position: relative; }
.flms-nav-ai-badge {
  margin-left: auto;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
}
.flms-nav-ai.active .flms-nav-ai-badge,
.flms-nav-ai:hover  .flms-nav-ai-badge { box-shadow: 0 0 10px rgba(139,92,246,.6); }

/* Wrapper */
.flms-ai-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--fe-header-h) - 48px);
  max-height: 820px;
  background: var(--fe-navy3);
  border-radius: var(--fe-radius-lg);
  border: 1px solid var(--fe-border2);
  overflow: hidden;
  box-shadow: var(--fe-shadow-card);
}

/* Header bar */
.flms-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--fe-navy4);
  border-bottom: 1px solid var(--fe-border2);
  flex-shrink: 0;
}
.flms-ai-header-left { display: flex; align-items: center; gap: 12px; }
.flms-ai-avatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(139,92,246,.4);
}
.flms-ai-title { font-size: 15px; font-weight: 700; color: var(--fe-text); }
.flms-ai-subtitle { font-size: 11px; color: var(--fe-text2); margin-top: 1px; }

/* Messages area */
.flms-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.flms-ai-messages::-webkit-scrollbar { width: 5px; }
.flms-ai-messages::-webkit-scrollbar-track { background: transparent; }
.flms-ai-messages::-webkit-scrollbar-thumb { background: var(--fe-navy5); border-radius: 4px; }

/* Message bubbles */
.flms-ai-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: fe-fadein .25s ease;
}
.flms-ai-msg-user {
  flex-direction: row-reverse;
}
.flms-ai-msg-avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg,#8B5CF6,#EC4899);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.flms-ai-msg-bubble {
  max-width: 72%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
}
.flms-ai-msg-bot .flms-ai-msg-bubble {
  background: var(--fe-navy4);
  border: 1px solid var(--fe-border2);
  border-top-left-radius: 4px;
  color: var(--fe-text);
}
.flms-ai-msg-user .flms-ai-msg-bubble {
  background: linear-gradient(135deg, #8B5CF6dd, #6D28D9dd);
  color: #fff;
  border-top-right-radius: 4px;
  margin-left: auto;
}
.flms-ai-msg-error .flms-ai-msg-bubble {
  background: var(--fe-danger-bg);
  border-color: var(--fe-danger);
  color: var(--fe-danger);
}

/* Typing indicator */
.flms-ai-typing {
  display: flex; align-items: center; gap: 5px; padding: 14px 15px;
}
.flms-ai-typing span {
  width: 7px; height: 7px;
  background: var(--fe-purple-lt);
  border-radius: 50%;
  animation: flmsAiTypingBounce 1.2s infinite ease-in-out;
}
.flms-ai-typing span:nth-child(2) { animation-delay: .2s; }
.flms-ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes flmsAiTypingBounce {
  0%,60%,100% { transform: translateY(0); opacity:.5; }
  30%         { transform: translateY(-6px); opacity:1; }
}

/* Image preview strip */
.flms-ai-img-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--fe-navy4);
  border-top: 1px solid var(--fe-border);
  flex-shrink: 0;
}
.flms-ai-img-preview img {
  height: 54px; width: auto;
  border-radius: 8px;
  border: 1.5px solid var(--fe-border2);
  object-fit: cover;
}
.flms-ai-img-preview button {
  background: var(--fe-danger-bg);
  color: var(--fe-danger);
  border: 1px solid var(--fe-danger);
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Input area */
.flms-ai-input-area {
  padding: 12px 16px 14px;
  background: var(--fe-navy4);
  border-top: 1px solid var(--fe-border2);
  flex-shrink: 0;
}
.flms-ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--fe-navy3);
  border: 1.5px solid var(--fe-border2);
  border-radius: 14px;
  padding: 8px 10px;
  transition: border-color .2s;
}
.flms-ai-input-row:focus-within {
  border-color: var(--fe-purple);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.flms-ai-tool-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.flms-ai-tool-btn:hover { background: var(--fe-navy5); transform: scale(1.1); }
.flms-ai-voice-active {
  background: var(--fe-danger-bg) !important;
  animation: fe-pulse 1s infinite;
}
.flms-ai-textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fe-text);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  min-height: 22px;
  max-height: 140px;
  padding: 2px 4px;
  overflow-y: auto;
}
.flms-ai-textarea::placeholder { color: var(--fe-text3); }
.flms-ai-send-btn {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 2px 10px rgba(139,92,246,.4);
}
.flms-ai-send-btn:hover { transform: scale(1.07); box-shadow: 0 4px 16px rgba(139,92,246,.6); }
.flms-ai-send-btn:disabled { opacity: .45; transform: none; cursor: not-allowed; }
.flms-ai-input-hint {
  font-size: 11px;
  color: var(--fe-text3);
  margin-top: 6px;
  min-height: 16px;
  text-align: center;
}

/* Light mode overrides */
[data-theme="light"] .flms-ai-wrap         { background: #f8faff; }
[data-theme="light"] .flms-ai-header       { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .flms-ai-msg-bot .flms-ai-msg-bubble { background: #fff; border-color: #e5e7eb; color: #111827; }
[data-theme="light"] .flms-ai-input-area   { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .flms-ai-input-row    { background: #f1f5f9; border-color: #d1d5db; }
[data-theme="light"] .flms-ai-textarea     { color: #111827; }
[data-theme="light"] .flms-ai-img-preview  { background: #fff; }

/* Responsive */
@media (max-width: 600px) {
  .flms-ai-wrap { height: calc(100vh - var(--fe-header-h) - 24px); border-radius: 10px; }
  .flms-ai-msg-bubble { max-width: 88%; font-size: 13px; }
  .flms-ai-header { padding: 10px 14px; }
  .flms-ai-messages { padding: 14px 12px 8px; }
  .flms-ai-input-area { padding: 10px 12px 12px; }
}

/* ══════════════════════════════════════════
   FOCUS AI — Mode Switcher & Live Panels
══════════════════════════════════════════ */

/* Mode bar */
.flms-ai-mode-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.flms-ai-mode-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--fe-border2);
  background: var(--fe-navy3);
  color: var(--fe-text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.flms-ai-mode-btn:hover {
  border-color: var(--fe-purple);
  color: var(--fe-text);
  background: var(--fe-purple-bg);
}
.flms-ai-mode-btn.active {
  background: linear-gradient(135deg,#8B5CF6,#6D28D9);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(139,92,246,.4);
}

/* Live panels share base wrap styles */
.flms-ai-live-panel { flex-direction: column; }

/* Status badge */
.flms-ai-live-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--fe-navy5);
  color: var(--fe-text2);
  border: 1px solid var(--fe-border2);
}
.flms-ai-live-badge-connecting {
  background: var(--fe-warning-bg);
  color: var(--fe-warning);
  border-color: var(--fe-warning);
  animation: fe-pulse 1s infinite;
}
.flms-ai-live-badge-live {
  background: var(--fe-danger-bg);
  color: var(--fe-danger);
  border-color: var(--fe-danger);
  animation: fe-pulse 1.5s infinite;
}
.flms-ai-live-badge-error {
  background: var(--fe-danger-bg);
  color: var(--fe-danger);
  border-color: var(--fe-danger);
}

/* Waveform canvas */
.flms-ai-viz-wrap {
  padding: 8px 20px;
  background: var(--fe-navy4);
  border-top: 1px solid var(--fe-border);
  flex-shrink: 0;
}
#flmsVoiceViz {
  width: 100%;
  height: 60px;
  display: block;
  border-radius: 6px;
}

/* Live controls row */
.flms-ai-live-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--fe-navy4);
  border-top: 1px solid var(--fe-border2);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.flms-ai-live-btn {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flms-ai-live-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}
.flms-ai-live-btn-start {
  background: linear-gradient(135deg,#14B8A6,#0EA5E9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(20,184,166,.35);
}
.flms-ai-live-btn-start:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20,184,166,.5);
}
.flms-ai-live-btn-stop {
  background: var(--fe-danger-bg);
  color: var(--fe-danger);
  border: 1.5px solid var(--fe-danger);
}
.flms-ai-live-btn-stop:hover:not(:disabled) {
  background: var(--fe-danger);
  color: #fff;
}
.flms-ai-live-hint {
  font-size: 12px;
  color: var(--fe-text2);
  margin-left: auto;
}

/* Video mode layout */
.flms-ai-video-body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
}
.flms-ai-video-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flms-ai-video-col:first-child {
  border-right: 1px solid var(--fe-border2);
}
.flms-ai-video-label {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--fe-text2);
  background: var(--fe-navy4);
  border-bottom: 1px solid var(--fe-border);
  flex-shrink: 0;
}
.flms-ai-video-el {
  width: 100%;
  flex: 1;
  object-fit: cover;
  background: #000;
  display: block;
}
.flms-ai-video-transcript {
  flex: 1;
  overflow-y: auto;
  border-radius: 0;
}

/* Light mode */
[data-theme="light"] .flms-ai-mode-btn     { background:#fff; border-color:#e5e7eb; color:#374151; }
[data-theme="light"] .flms-ai-mode-btn.active { background:linear-gradient(135deg,#8B5CF6,#6D28D9); color:#fff; }
[data-theme="light"] .flms-ai-live-controls { background:#fff; border-color:#e5e7eb; }
[data-theme="light"] .flms-ai-viz-wrap      { background:#f8faff; }

/* Responsive */
@media (max-width: 700px) {
  .flms-ai-video-body { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .flms-ai-video-col:first-child { border-right: none; border-bottom: 1px solid var(--fe-border2); }
  .flms-ai-live-hint { display: none; }
  .flms-ai-mode-btn span { display: none; }
  .flms-ai-mode-btn { padding: 9px 14px; }
}

/* ══════════════════════════════════════════
   MESSAGING UI
══════════════════════════════════════════ */

/* Wrapper — fills page content area */
.flms-msg-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - var(--fe-header-h, 64px) - 48px);
  max-height: 840px;
  background: var(--fe-navy3);
  border-radius: var(--fe-radius-lg);
  border: 1px solid var(--fe-border2);
  overflow: hidden;
  box-shadow: var(--fe-shadow-card);
}

/* ── Sidebar (contact list) ── */
.flms-msg-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--fe-border2);
  background: var(--fe-navy4);
  overflow: hidden;
}
.flms-msg-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  flex-shrink: 0;
}
.flms-msg-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fe-text);
}
.flms-msg-unread-badge {
  background: var(--fe-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.flms-msg-search-wrap { padding: 0 12px 10px; flex-shrink: 0; }
.flms-msg-search {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--fe-border2);
  background: var(--fe-navy3);
  color: var(--fe-text);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.flms-msg-search:focus { border-color: var(--fe-purple); }

.flms-msg-contacts {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}
.flms-msg-contacts::-webkit-scrollbar { width: 4px; }
.flms-msg-contacts::-webkit-scrollbar-thumb { background: var(--fe-navy5); border-radius: 4px; }

.flms-msg-group-label {
  padding: 10px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--fe-text3);
}
.flms-msg-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 8px;
  transition: background .15s;
  position: relative;
}
.flms-msg-contact:hover  { background: var(--fe-navy3); }
.flms-msg-contact.active { background: var(--fe-purple-bg); border: 1px solid var(--fe-purple); }

.flms-msg-contact-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,#8B5CF6,#6D28D9);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.flms-msg-contact-info { flex: 1; min-width: 0; }
.flms-msg-contact-name {
  font-size: 13px; font-weight: 600; color: var(--fe-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flms-msg-contact-role { font-size: 11px; color: var(--fe-text2); margin-top: 1px; }

.flms-msg-contact-badge {
  background: var(--fe-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  flex-shrink: 0;
}
.flms-msg-empty-contacts {
  padding: 32px 20px;
  text-align: center;
  color: var(--fe-text2);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Chat panel ── */
.flms-msg-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.flms-msg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fe-text2);
  text-align: center;
  padding: 40px;
}
.flms-msg-empty h3 { font-size: 18px; color: var(--fe-text); margin: 0 0 8px; }
.flms-msg-empty p  { font-size: 13px; margin: 0; }

.flms-msg-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--fe-navy4);
  border-bottom: 1px solid var(--fe-border2);
  flex-shrink: 0;
}
.flms-msg-chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,#8B5CF6,#6D28D9);
  color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.flms-msg-chat-name { font-size: 15px; font-weight: 700; color: var(--fe-text); }
.flms-msg-chat-meta { font-size: 11px; color: var(--fe-text2); margin-top: 1px; }

/* ── Messages scroll area ── */
.flms-msg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.flms-msg-messages::-webkit-scrollbar { width: 5px; }
.flms-msg-messages::-webkit-scrollbar-thumb { background: var(--fe-navy5); border-radius: 4px; }

.flms-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: fe-fadein .2s ease;
}
.flms-msg-row-mine   { flex-direction: row-reverse; }
.flms-msg-row-theirs { flex-direction: row; }

.flms-msg-bubble-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg,#8B5CF6,#6D28D9);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.flms-msg-row-theirs .flms-msg-bubble-avatar {
  background: linear-gradient(135deg,#14B8A6,#0EA5E9);
}

.flms-msg-bubble {
  max-width: 68%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}
.flms-msg-row-mine .flms-msg-bubble {
  background: linear-gradient(135deg,#8B5CF6dd,#6D28D9dd);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.flms-msg-row-theirs .flms-msg-bubble {
  background: var(--fe-navy4);
  border: 1px solid var(--fe-border2);
  color: var(--fe-text);
  border-bottom-left-radius: 4px;
}
.flms-msg-bubble p { margin: 0 0 4px; }
.flms-msg-bubble p:last-of-type { margin-bottom: 0; }

.flms-msg-time {
  display: block;
  font-size: 10px;
  opacity: .65;
  margin-top: 4px;
  text-align: right;
}
.flms-msg-row-theirs .flms-msg-time { text-align: left; }

/* Attachment styles */
.flms-msg-attach-img {
  max-width: 220px; max-height: 180px;
  border-radius: 8px; display: block;
  margin-top: 6px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.15);
  object-fit: cover;
  transition: opacity .15s;
}
.flms-msg-attach-img:hover { opacity: .85; }
.flms-msg-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.2);
}
.flms-msg-attach-file:hover { background: rgba(255,255,255,.18); }

/* Attachment preview strip */
.flms-msg-attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--fe-navy4);
  border-top: 1px solid var(--fe-border);
  font-size: 12px;
  color: var(--fe-text2);
  flex-shrink: 0;
}
.flms-msg-attach-preview button {
  background: var(--fe-danger-bg);
  color: var(--fe-danger);
  border: 1px solid var(--fe-danger);
  border-radius: 50%;
  width: 20px; height: 20px;
  cursor: pointer;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Input area ── */
.flms-msg-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  background: var(--fe-navy4);
  border-top: 1px solid var(--fe-border2);
  flex-shrink: 0;
}
.flms-msg-tool-btn {
  background: none; border: none; cursor: pointer;
  font-size: 20px; padding: 4px 6px;
  border-radius: 8px; flex-shrink: 0;
  transition: background .15s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.flms-msg-tool-btn:hover { background: var(--fe-navy5); transform: scale(1.1); }
.flms-msg-textarea {
  flex: 1;
  background: var(--fe-navy3);
  border: 1.5px solid var(--fe-border2);
  border-radius: 12px;
  padding: 9px 14px;
  color: var(--fe-text);
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  outline: none;
  transition: border-color .2s;
  line-height: 1.5;
}
.flms-msg-textarea:focus { border-color: var(--fe-purple); }
.flms-msg-textarea::placeholder { color: var(--fe-text3); }
.flms-msg-send-btn {
  width: 40px; height: 40px;
  background: linear-gradient(135deg,#8B5CF6,#6D28D9);
  border: none; border-radius: 12px; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 2px 10px rgba(139,92,246,.4);
}
.flms-msg-send-btn:hover    { transform: scale(1.07); box-shadow: 0 4px 16px rgba(139,92,246,.6); }
.flms-msg-send-btn:disabled { opacity: .45; transform: none; cursor: not-allowed; }

/* Light mode */
[data-theme="light"] .flms-msg-wrap       { background: #f8faff; }
[data-theme="light"] .flms-msg-sidebar    { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .flms-msg-chat-header{ background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .flms-msg-input-area { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .flms-msg-textarea   { background: #f1f5f9; border-color: #d1d5db; color: #111; }
[data-theme="light"] .flms-msg-row-theirs .flms-msg-bubble { background: #fff; border-color: #e5e7eb; color: #111; }
[data-theme="light"] .flms-msg-search     { background: #f1f5f9; border-color: #d1d5db; color: #111; }

/* Responsive */
@media (max-width: 700px) {
  .flms-msg-wrap { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .flms-msg-sidebar { display: none; }
  .flms-msg-wrap.show-contacts .flms-msg-sidebar { display: flex; }
  .flms-msg-wrap.show-contacts .flms-msg-chat    { display: none; }
  .flms-msg-bubble { max-width: 88%; }
}