styles/css_base.py

# css_base.py - Base layout, palette, typography, components (non-table styles)
CSS_BASE = """
:root{
  /* Slightly lighter dark palette + softer white text */
  --bg:#141a22;
  --panel:#1a2333;
  --panel-soft:#171f2b;
  --line:#273142;
  --text:#edf2f7;      /* softer white used everywhere */
  --muted:#cbd5e1;
  --acc:#7dd3fc;
  --acc2:#60a5fa;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Lock appearance regardless of OS/browser light/dark */
html{ color-scheme: dark !important; scrollbar-gutter:stable; }
html[data-theme="light"],
body[data-theme="light"],
.gradio-container[data-theme="light"],
html[data-theme="dark"],
body[data-theme="dark"],
.gradio-container[data-theme="dark"]{
  --bg:#141a22; --panel:#1a2333; --panel-soft:#171f2b; --line:#273142;
  --text:#edf2f7; --muted:#cbd5e1; --acc:#7dd3fc; --acc2:#60a5fa;
}

/* Base layout */
html,body{ background:var(--bg)!important; margin:0!important; padding:0!important; scrollbar-gutter:stable; }
.gradio-container{
  background:var(--bg)!important; color:var(--text)!important;
  padding:0!important; margin:0!important; max-width:100%!important;
  width:100%!important; box-sizing:border-box!important;
  scrollbar-gutter:stable;
}
.gradio-container .block,.gradio-container .panel,.gradio-container .tabs,
.gradio-container .tabitem,.gradio-container .tab-container,.gradio-container .wrap,
.gradio-container .container{
  background:var(--bg)!important; padding:0!important; margin:0!important;
}
.gradio-container > *:first-child{ margin-top:0!important; padding-top:0!important; }

/* Title */
#main-title{ margin:0!important; padding:2px 16px 2px 0!important; }
#main-title h1{
  font-size:30px!important; font-weight:800!important; margin:0!important;
  color:var(--text)!important; letter-spacing:.2px; line-height:1.1!important;
}

/* Grid gaps */
.gradio-container .gr-row,.gradio-container .grid{ gap:4px!important; }

/* Typography and links */
.gradio-container,
.gradio-container *:not(i.fa):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands){
  font-family:inherit!important;
}
.gradio-container a{
  color:var(--acc2)!important; text-decoration:underline; text-underline-offset:2px;
}
.gradio-container a:hover{ color:var(--acc)!important; text-decoration-thickness:2px; }

/* Prose containers */
.gradio-container .prose, .gradio-container .markdown, .gradio-container .md{
  background:var(--bg)!important; color:var(--text)!important;
}

/* Form controls */
.gradio-container input, .gradio-container textarea, .gradio-container select{
  background:var(--panel)!important; color:var(--text)!important;
  border:1px solid var(--line)!important; border-radius:10px!important;
}
.gradio-container input::placeholder, .gradio-container textarea::placeholder{
  color:rgba(237,242,247,.7)!important;
}
.gradio-container select option{ background:var(--panel)!important; color:var(--text)!important; }

/* Icons accents (global) */
i.fa-dice{color:#a78bfa!important;} i.fa-magnifying-glass{color:#34d399!important;}
i.fa-brain{color:#fbbf24!important;} i.fa-rocket{color:#f87171!important;}
i.fa-trophy{color:#d4af37!important;}

/* Docs icons → soft white (exclude howto header icons to allow accent color) */
.docs-sec i.fa,.docs-sec i.fa-solid,.docs-sec i[class^="fa-"]{
  color:var(--text)!important;
}

/* Headings and text */
.docs-sec h3,.practice-tabs h3{
  font-size:22px!important; font-weight:900!important; color:var(--text)!important;
  margin:0 0 6px 0!important;
}
.docs-sec h4,.practice-tabs h4{
  font-size:18px!important; font-weight:800!important; color:var(--text)!important;
  margin:0 0 4px 0!important;
}
.docs-sec p,.docs-sec li,.practice-tabs p,.practice-tabs li{
  font-size:15px!important; color:var(--text)!important;
}

/* Ensure stage titles match body text color across tabs */
.tabitem h3, .tabitem h3 *{ color:var(--text)!important; }

/* Buttons */
.gradio-container .gr-button{
  border-radius:10px!important; border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;
  color:var(--text)!important; transition:all .18s ease; box-shadow:var(--shadow);
}
.gradio-container .gr-button:hover{
  transform:translateY(-1px); border-color:rgba(255,255,255,.12)!important;
}
.gradio-container .gr-button-primary{
  background:linear-gradient(180deg,#60a5fa,#3b82f6)!important; border-color:#3b82f6!important;
  color:#0b1120!important; font-weight:800!important; text-shadow:0 1px 0 rgba(255,255,255,.2);
}
/* Submit play icon */
.btn-submit button::before,.btn-submit .gr-button::before,
.btn-submit button span::before,.btn-submit .gr-button span::before,
.btn-submit [role="button"]::before,.btn-submit [role="button"]>span::before{
  font-family:"Font Awesome 6 Free"!important; font-weight:900!important;
  content:"\\f04b"; color:var(--text)!important; display:inline-block; margin-right:6px;
}
/* Suggest button fixed look */
.btn-suggest .gr-button,.btn-suggest button,.btn-suggest [role="button"]{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;
  color:var(--text)!important; border:1px solid rgba(255,255,255,.12)!important; box-shadow:var(--shadow);
}
.btn-suggest .gr-button:hover,.btn-suggest button:hover,.btn-suggest [role="button"]:hover{
  transform:translateY(-1px); border-color:rgba(255,255,255,.18)!important;
}
.btn-suggest .gr-button *, .btn-suggest button *, .btn-suggest [role="button"] *{
  color:inherit!important;
}

/* Flow chips */
.flow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 8px 0; }
.flow .node{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--text); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:6px 12px; font-weight:800; box-shadow:var(--shadow);
}
.flow .arrow{ color:var(--acc2); font-weight:800; }

/* How-to box */
.howto{
  border-left:4px solid var(--acc2); outline:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:10px 14px; margin-top:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); box-shadow:var(--shadow);
}
.howto h4{
  margin:0 0 6px 0; font-size:18px; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:4px;
}
.howto ol{ margin:0; padding-left:1.2em; list-style:decimal; }
.howto li{ margin:8px 0; padding-bottom:6px; border-bottom:1px dashed rgba(255,255,255,.15); }
.howto li:last-child{ border-bottom:none; padding-bottom:0; }

/* How-to variants (color accents) */
.howto.info{ border-left-color:#38bdf8!important; outline-color:rgba(56,189,248,.25)!important; }
.howto.success{ border-left-color:#10b981!important; outline-color:rgba(16,185,129,.25)!important; }
.howto.warning{ border-left-color:#f59e0b!important; outline-color:rgba(245,158,11,.25)!important; }
.howto.note{ border-left-color:#a78bfa!important; outline-color:rgba(167,139,250,.25)!important; }
.howto.info h4 i{ color:#38bdf8!important; }
.howto.success h4 i{ color:#10b981!important; }
.howto.warning h4 i{ color:#f59e0b!important; }
.howto.note h4 i{ color:#a78bfa!important; }

/* How-to list: step title styling */
.howto .step-title{
  color:#60a5fa!important; font-weight:800!important; display:block!important; margin-bottom:2px;
}
.howto.info .step-title{ color:#38bdf8!important; }
.howto.success .step-title{ color:#10b981!important; }
.howto.warning .step-title{ color:#f59e0b!important; }
.howto.note .step-title{ color:#a78bfa!important; }

/* How-to list: step description slightly muted */
.howto .step-desc{ color: rgba(237,242,247,.85)!important; }

/* Docs howto: visibility & unity enhancements */
.howto{
  position:relative;
  background: linear-gradient(180deg, rgba(96,165,250,.10), rgba(96,165,250,.04)) !important;
  border-radius:12px!important;
}
.howto::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, #60a5fa, #3b82f6);
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.howto h4 i{
  background: rgba(96,165,250,.18); border-radius:999px; padding:6px;
}
.howto ol li::marker{ color:#60a5fa; font-weight:900; }
.howto li{ padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12); }
.howto li:last-child{ border-bottom:none; }

/* Results title styling */
.result-title{
  color:#60a5fa!important; font-weight:900!important;
  margin: 4px 0 8px 0!important; display:flex!important; align-items:center!important; gap:8px!important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}
.result-title i{ color:#60a5fa!important; }

/* Unify howto icon and step-title colors across all blocks */
.docs-sec .howto h4 i, .practice-tabs .howto h4 i, .howto h4 i{ color: var(--acc2) !important; }
.docs-sec .howto .step-title, .practice-tabs .howto .step-title, .howto .step-title{ color:#60a5fa !important; }
"""