:root{
  color-scheme:light dark;
  --experience-bg:#f7f9fb;
  --experience-surface:#ffffff;
  --experience-surface-2:#f6f8fa;
  --experience-ink:#101316;
  --experience-muted:#667085;
  --experience-line:#e7e9ee;
  --experience-sidebar:#111417;
  --experience-sidebar-hover:#20262b;
  --experience-sidebar-text:#b7c0ca;
  --experience-sidebar-strong:#ffffff;
  --experience-result:#101316;
  --experience-result-ink:#e8eef2;
  --experience-control:#ffffff;
  --experience-shadow:0 30px 90px rgba(15,23,42,.12);
}
:root[data-theme="dark"]{
  --experience-bg:#0b0f12;
  --experience-surface:#11171b;
  --experience-surface-2:#151d22;
  --experience-ink:#eef3f5;
  --experience-muted:#9aabb5;
  --experience-line:#27323a;
  --experience-sidebar:#090c0f;
  --experience-sidebar-hover:#1b252b;
  --experience-sidebar-text:#aebcc5;
  --experience-sidebar-strong:#ffffff;
  --experience-result:#070a0c;
  --experience-result-ink:#e8eef2;
  --experience-control:#11171b;
  --experience-shadow:0 30px 90px rgba(0,0,0,.38);
}
html,body{background:var(--experience-bg);color:var(--experience-ink)}
.login-gate{background:radial-gradient(circle at 20% 10%,rgba(19,163,127,.10),transparent 36%),var(--experience-bg)}
.login-card,.topbar,.card,.badge,.status-pill{background:var(--experience-surface);border-color:var(--experience-line);color:var(--experience-ink)}
.login-card{box-shadow:var(--experience-shadow)}
.login-card input,.assistant textarea,.experience-select{
  color:var(--experience-ink);
  background:var(--experience-control);
  border-color:var(--experience-line);
}
.muted,.runtime,.metric span,.metric small{color:var(--experience-muted)}
.sidebar{background:var(--experience-sidebar)}
.nav{color:var(--experience-sidebar-text)}
.nav.active,.nav:hover{background:var(--experience-sidebar-hover);color:var(--experience-sidebar-strong)}
.result{background:var(--experience-result);color:var(--experience-result-ink)}
.experience-controls{display:flex;align-items:center;gap:8px;margin-left:auto}
.experience-select{
  min-height:36px;
  padding:6px 30px 6px 10px;
  border:1px solid var(--experience-line);
  border-radius:10px;
  font:inherit;
  font-size:.78rem;
  font-weight:750;
}
.user{margin-left:0}
html[dir="rtl"] .sidebar .nav{text-align:right}
html[dir="rtl"] .experience-select{padding:6px 10px 6px 30px}
html[dir="rtl"] .user{margin-left:0;margin-right:auto}
@media(max-width:760px){
  .topbar{height:auto;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .experience-controls{order:3;width:100%;margin-left:0}
  .experience-select{flex:1;min-width:0}
  .user{margin-left:auto}
}