controllers/views/styles.py

"""
All CSS for Speak Lab Gradio — mirrors the original styles.css palette.
"""

CSS = """
/* ── Reset / base ─────────────────────────────────────────────────────────── */
body, .gradio-container {
  background: #0f1117 !important;
  color: #e2e8f0 !important;
  font-family: 'Inter', system-ui, sans-serif;
}
.gradio-container .prose { color: #e2e8f0 !important; }
footer { display: none !important; }
h1, h2, h3 { color: #f1f5f9 !important; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-nav button {
  background: #1a1d2e !important;
  color: #94a3b8 !important;
  border: 1px solid #2d3148 !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600;
  transition: background .15s;
}
.tab-nav button.selected {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #6366f1 !important;
}

/* ── Cards / sections ─────────────────────────────────────────────────────── */
.card-block {
  background: #1a1d2e;
  border: 1px solid #2d3148;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 12px;
}

/* ── Prompt / quote box ───────────────────────────────────────────────────── */
.prompt-box {
  background: #12141f;
  border: 1px solid #2d3148;
  border-left: 4px solid #6366f1;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #f1f5f9;
  margin: 8px 0 14px;
  min-height: 56px;
}
.focus-badge {
  display: inline-block;
  background: #6366f1;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: .04em;
}

/* ── Framework tips (PRES / STAR) ─────────────────────────────────────────── */
.framework-tips {
  background: #12141f;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  font-size: .9rem;
  color: #94a3b8;
}
.framework-tips strong { color: #e2e8f0; }
.framework-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.framework-step {
  background: #1e2130;
  border: 1px solid #2d3148;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .82rem;
  color: #64748b;
}
.framework-step.active {
  background: #312e81;
  border-color: #6366f1;
  color: #a5b4fc;
}
.framework-step strong { color: #818cf8; }

/* ── JAM countdown bar ────────────────────────────────────────────────────── */
.countdown-wrap {
  width: 100%;
  height: 6px;
  background: #1e2130;
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
/* the animated fill is driven by JS via inline style */

/* ── Desc text ────────────────────────────────────────────────────────────── */
.desc-text {
  color: #64748b;
  font-size: .92rem;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
label { color: #94a3b8 !important; font-size: .88rem !important; }

/* ── Analysis panel ───────────────────────────────────────────────────────── */
.analysis-box {
  background: #1a1d2e;
  border: 1px solid #2d3148;
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 10px;
}
.analysis-box h3 {
  color: #e2e8f0;
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.score-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.score-card {
  flex: 1;
  min-width: 120px;
  background: #12141f;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.sc-label {
  font-size: .75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.sc-value { font-size: 2rem; font-weight: 800; }
.sc-good  { color: #22c55e; }
.sc-ok    { color: #f59e0b; }
.sc-poor  { color: #ef4444; }
.sc-na    { color: #475569; }
.transcript-box {
  background: #12141f;
  border: 1px solid #2d3148;
  border-radius: 8px;
  padding: 14px 16px;
  color: #cbd5e1;
  font-size: .95rem;
  line-height: 1.7;
  min-height: 60px;
}
.transcript-box .placeholder { color: #475569; font-style: italic; }

/* ── Streak card ──────────────────────────────────────────────────────────── */
.streak-card {
  background: #1a1d2e;
  border: 1px solid #2d3148;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 16px 0 8px;
}
.s-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.s-title { font-size: 1rem; font-weight: 700; color: #f1f5f9; }
.s-sub   { font-size: .8rem; color: #64748b; margin-top: 3px; }
.s-flames { display: flex; gap: 10px; }
.s-flame {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #12141f;
  border: 1px solid #2d3148;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .82rem;
  color: #94a3b8;
}
.s-flame-best { border-color: #854d0e; }
.s-num   { font-size: 1.15rem; font-weight: 800; color: #f1f5f9; margin: 0 2px; }
.s-flabel {
  font-size: .65rem;
  color: #64748b;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.s-mods  { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.s-mod {
  flex: 1;
  min-width: 90px;
  background: #12141f;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.s-mod-label {
  font-size: .7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.s-mod-count { font-size: 1.4rem; font-weight: 800; color: #6366f1; }
.s-mod-avg   { font-size: .72rem; color: #475569; margin-top: 2px; }
.s-scroll    { overflow-x: auto; padding-bottom: 6px; }
.s-months    { display: grid; gap: 2px; margin-bottom: 4px; }
.s-month     { font-size: .68rem; color: #475569; }
.s-grid      { display: grid; gap: 2px; }
.s-cell      { width: 11px; height: 11px; border-radius: 2px; }
.s-cell.empty { background: transparent; }
.s-cell.l0  { background: #1e2130; }
.s-cell.l1  { background: #312e81; }
.s-cell.l2  { background: #4338ca; }
.s-cell.l3  { background: #6366f1; }
.s-cell.l4  { background: #a5b4fc; }
.s-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: .72rem;
  color: #475569;
}
.s-legend .s-cell { flex-shrink: 0; }

/* ── Toast notification ───────────────────────────────────────────────────── */
#sl-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #312e81;
  color: #e0e7ff;
  border: 1px solid #6366f1;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 9999;
}
#sl-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
"""