:root{
  /* Everpure brand identity — every value below was sampled directly
     from pixels in real screenshots of everpuredata.com (hero, nav,
     feature cards, product panels, stat cards), not inferred from a
     design writeup. Warm cream + terracotta orange + sage gray-green,
     not the cooler navy/hot-orange palette from an earlier attempt. */
  --navy:#2D2A27;          /* warm charcoal — sampled from the site's
                               top utility bar and heading text. Kept
                               the variable name so every existing call
                               site (buttons, sidebar, bubbles) repaints
                               correctly with no find-and-replace needed
                               elsewhere in the codebase. */
  --navy-deep:#1C1A18;
  --cream:#FFF4DD;         /* sampled from the page background */
  --paper:#FFF5E3;         /* sampled from card/nav backgrounds — a
                               hair warmer than --cream so cards still
                               read as a distinct surface */
  --ink:#2D2A27;
  --ink-soft:#6B6258;
  --ink-faint:#A39A8E;
  --line:#FFCFB6;          /* sampled from card borders/hexagon outlines
                               — a soft peach, not a cool gray */
  --line-soft:#FCEFDC;
  --indigo:#D55D1D;        /* sampled from primary buttons (Start Here,
                               Explore Our Platform) and the nav hover
                               underline — a muted terracotta, not a
                               hot saturated orange */
  --indigo-soft:#FFE4CC;
  --indigo-deep:#A8480F;
  --accent-bright:#FF7023; /* sampled from the logo mark, stat numbers
                               (77%, 84, 85%), and section eyebrow labels
                               — a brighter orange used sparingly for
                               numbers/icons, distinct from the muted
                               button orange above */
  --sage:#5A6359;          /* sampled from the secondary button
                               ("Contact Us") and dark icon panel boxes */
  --sage-bg:#CFE8D4;       /* sampled from the mint-green platform
                               feature panel */
  --sage-deep:#3F453D;

  --learn:#185FA5;       --learn-bg:#E6F1FB;       --learn-deep:#0C447C;
  --assess:#0F6E56;      --assess-bg:#E1F5EE;      --assess-deep:#085041;
  --practice:#993C1D;    --practice-bg:#FAECE7;    --practice-deep:#712B13;
  --perform:#993556;     --perform-bg:#FBEAF0;     --perform-deep:#72243E;

  --green:#3B6D11; --green-bg:#EAF3DE;
  --amber:#854F0B; --amber-bg:#FAEEDA;
  --red:#A32D2D;   --red-bg:#FCEBEB;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body,#root{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'SF Mono','Consolas','Liberation Mono',monospace; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
.icon{ display:inline-flex; flex-shrink:0; }
.icon svg{ display:block; }

/* ===== App shell ===== */
.app-shell{
  display:flex;
  height:100vh;
  width:100%;
  background:var(--cream);
  overflow:hidden;
}

/* ===== Sidebar ===== */
.sidebar{
  width:248px;
  flex:0 0 248px;
  background:var(--navy);
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  overflow-y:auto;
}
.sb-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.sb-brand .mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 30px;
  color:#fff;
}
.sb-brand .name{ color:#fff; font-size:15px; font-weight:700; }

.sb-newchat{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,0.08);
  border:0.5px solid rgba(255,255,255,0.14);
  border-radius:10px;
  padding:10px 12px;
  color:#fff;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:18px;
  width:100%;
  text-align:left;
}
.sb-newchat:hover{ background:rgba(255,255,255,0.13); }

.sb-section{
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.38);
  padding:14px 10px 8px;
}
.sb-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px;
  border-radius:9px;
  color:rgba(255,255,255,0.72);
  font-size:13.5px;
  font-weight:600;
  margin-bottom:2px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
}
.sb-item:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.sb-item.active{ background:rgba(255,255,255,0.12); color:#fff; box-shadow:inset 3px 0 0 var(--indigo); }
.sb-item .count{
  margin-left:auto;
  font-size:11px; font-weight:700;
  background:rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.85);
  padding:2px 7px;
  border-radius:100px;
}
.sb-spacer{ flex:1; }
.sb-user{ display:flex; align-items:center; gap:10px; padding:10px; border-top:0.5px solid rgba(255,255,255,0.12); margin-top:8px; min-width:0; }
.sb-user .avatar{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,0.14); color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px; font-weight:700; flex:0 0 30px;
}
.sb-user .info{ min-width:0; overflow:hidden; }
.sb-user .info .name{ color:#fff; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user .info .role{ color:rgba(255,255,255,0.5); font-size:11.5px; }

/* ===== Main ===== */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; background:var(--cream); }
.topbar{
  flex:0 0 64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  border-bottom:0.5px solid var(--line);
  background:var(--paper);
}
.topbar h1{ font-size:17px; font-weight:700; }
.topbar .sub{ font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-top:1px;}
.topbar-actions{ display:flex; align-items:center; gap:10px; }

.content{ flex:1; overflow-y:auto; padding:28px; }
.content::-webkit-scrollbar{ width:10px; }
.content::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }

/* ===== Shared ===== */
.icon-btn{
  width:34px; height:34px; border-radius:9px;
  background:var(--line-soft); border:0.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.icon-btn:hover{ background:var(--line); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius:10px;
  font-weight:600; font-size:13.5px; border:none; white-space:nowrap;
  transition:background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-sm{ height:32px; padding:0 12px; font-size:12.5px; border-radius:8px; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-deep); }
.btn-primary:active{ transform:scale(0.98); }
.btn-secondary{ background:var(--paper); color:var(--navy); border:0.5px solid var(--line); }
.btn-secondary:hover{ background:var(--line-soft); }
.btn-ghost{ background:var(--line-soft); color:var(--ink); }
.btn-ghost:hover{ background:var(--line); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

.card{ background:var(--paper); border:0.5px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(45,42,39,0.05), 0 1px 8px rgba(45,42,39,0.04); }
.card-flat{ background:var(--line-soft); border-radius:12px; padding:14px 16px; }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:4px 11px; border-radius:100px; border:none; }
.pill-learn{ background:var(--learn-bg); color:var(--learn-deep); }
.pill-assess{ background:var(--assess-bg); color:var(--assess-deep); }
.pill-practice{ background:var(--practice-bg); color:var(--practice-deep); }
.pill-perform{ background:var(--perform-bg); color:var(--perform-deep); }
.pill-green{ background:var(--green-bg); color:var(--green); }
.pill-amber{ background:var(--amber-bg); color:var(--amber); }
.pill-red{ background:var(--red-bg); color:var(--red); }
.pill-gray{ background:var(--line-soft); color:var(--ink-soft); }
.pill-indigo{ background:var(--indigo-soft); color:var(--indigo-deep); }
.pill-sage{ background:var(--sage-bg); color:var(--sage-deep); }
.pill-navy{ background:var(--navy); color:#fff; }
.pill-clickable{ cursor:pointer; }
.pill-clickable:hover{ filter:brightness(0.96); }

.label-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); }
.divider{ height:0.5px; background:var(--line); }
.row{ display:flex; align-items:center; justify-content:space-between; }
.progress-track{ height:6px; border-radius:100px; background:var(--line-soft); overflow:hidden; }
.progress-fill{ height:100%; border-radius:100px; transition:width 0.4s ease; }

.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--indigo-soft); color:var(--indigo-deep);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; flex:0 0 34px;
}

.ai-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--paper); border:1px solid var(--indigo-soft); color:var(--indigo-deep);
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:100px;
}
.ai-chip:hover{ background:var(--indigo-soft); }
.ai-chip .ic{ color:var(--indigo); display:flex; }

.bubble-ai{
  max-width:640px; background:var(--paper); border:0.5px solid var(--line);
  border-radius:4px 14px 14px 14px; padding:14px 16px; font-size:14px; line-height:1.65;
  white-space:pre-wrap;
}
.bubble-user{
  align-self:flex-end; max-width:560px; background:var(--navy); color:#fff;
  border-radius:14px 14px 4px 14px; padding:12px 16px; font-size:14px; line-height:1.6;
  white-space:pre-wrap;
}
.bubble-row{ display:flex; }
.bubble-row.user{ justify-content:flex-end; }

.ask-bar{
  display:flex; align-items:center; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px 18px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.ask-bar:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-soft); }
.ask-bar input{
  flex:1; border:none; outline:none; font-size:15px; color:var(--ink); background:transparent;
}
.ask-bar input::placeholder{ color:var(--ink-faint); }

.mode-tile{
  border-radius:16px; border:1px solid var(--line); background:var(--paper);
  padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  text-align:left; width:100%;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mode-tile:hover{ border-color:var(--indigo); box-shadow:0 4px 16px rgba(213,93,29,0.14); transform:translateY(-1px); }
.mode-tile.selected{ border:1.5px solid var(--indigo); }
.mode-tile .ic-wrap{ width:40px;height:40px;border-radius:11px; display:flex;align-items:center;justify-content:center; }
.mode-tile .title{ font-size:15.5px; font-weight:700; }
.mode-tile .desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

.typing-dots{ display:inline-flex; gap:4px; padding:6px 2px; }
.typing-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--ink-faint);
  animation:typingPulse 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.2s; }
.typing-dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes typingPulse{ 0%,80%,100%{ opacity:0.3; transform:scale(0.8);} 40%{ opacity:1; transform:scale(1);} }

.skel{ background:linear-gradient(90deg, var(--line-soft) 25%, var(--line) 50%, var(--line-soft) 75%); background-size:200% 100%; animation:skelShine 1.5s infinite; border-radius:8px; }
@keyframes skelShine{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.toast{
  position:fixed; bottom:24px; right:24px;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:10px;
  font-size:13.5px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.18);
  z-index:1000;
  display:flex; align-items:center; gap:8px;
}

@media (max-width: 900px){
  .sidebar{ width:72px; flex:0 0 72px; padding:16px 10px; }
  .sidebar .sb-brand .name, .sidebar .sb-newchat span, .sidebar .sb-item span, .sidebar .sb-item .count, .sidebar .sb-section, .sidebar .sb-user .info{ display:none; }
  .sidebar .sb-newchat, .sidebar .sb-item{ justify-content:center; }
}

@media (max-width: 1100px){
  .mode-tile-grid{ grid-template-columns: 220px 220px !important; }
}
@media (max-width: 600px){
  .mode-tile-grid{ grid-template-columns: 220px !important; }
}

/* ---- Mobile layout ------------------------------------------------- */
@media (max-width: 600px){
  /* Sidebar becomes a bottom nav bar on mobile */
  .app-shell{ flex-direction: column; }
  .sidebar{
    width: 100% !important;
    flex: 0 0 56px !important;
    flex-direction: row !important;
    order: 2;
    padding: 0 4px !important;
    overflow-x: auto;
    border-top: 0.5px solid rgba(255,255,255,0.1);
    border-right: none;
  }
  .sidebar .sb-brand,
  .sidebar .sb-newchat,
  .sidebar .sb-section,
  .sidebar .sb-user{ display: none !important; }
  .sidebar .sb-items{ display: flex; flex-direction: row; gap: 0; padding: 0; }
  .sidebar .sb-item{
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 9px;
    min-width: 52px;
    justify-content: center;
    align-items: center;
  }
  .sidebar .sb-item span{ display: block !important; font-size: 9px; opacity: 0.7; white-space: nowrap; }
  .sidebar .sb-item.active{ background: rgba(255,255,255,0.14); }
  .main{ order: 1; min-height: 0; flex: 1; }
  .content{ padding: 16px !important; }

  /* Two-column layouts collapse to one on mobile */
  .deal-right-content,
  .deals-two-col,
  [style*="display: flex"][style*="gap: 20px"]{
    flex-direction: column !important;
  }

  /* Cards fill full width */
  .card{ padding: 14px !important; }

  /* Hide some decorative elements to save space */
  .mode-tile .desc{ display: none; }

  /* Full-width buttons on mobile */
  .btn-primary{ width: 100%; justify-content: center; }
}