.stm-app {
  --stm-bg: #f6f8fb;
  --stm-card: #ffffff;
  --stm-text: #162033;
  --stm-muted: #64748b;
  --stm-line: #dbe3ef;
  --stm-blue: #2563eb;
  --stm-blue-dark: #1e40af;
  --stm-green: #0f9f6e;
  --stm-red: #c2410c;
  --stm-yellow: #a16207;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--stm-text);
  background: linear-gradient(180deg, #f8fbff 0%, var(--stm-bg) 100%);
  border: 1px solid var(--stm-line);
  border-radius: 22px;
  padding: 22px;
  max-width: 1240px;
  margin: 24px auto;
  box-sizing: border-box;
}
.stm-app * { box-sizing: border-box; }
.stm-topbar, .stm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.stm-logo {
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}
.stm-tagline, .stm-small, .stm-label, .stm-empty {
  color: var(--stm-muted);
}
.stm-badge {
  background: #e8f0ff;
  color: var(--stm-blue-dark);
  border: 1px solid #c7d8ff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.stm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: #eef4ff;
  border: 1px solid #d8e5ff;
  border-radius: 16px;
  margin: 14px 0 22px;
}
.stm-nav-link {
  text-decoration: none !important;
  color: #334155;
  font-weight: 750;
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1;
}
.stm-nav-link.active, .stm-nav-link:hover {
  background: var(--stm-card);
  color: var(--stm-blue-dark);
  box-shadow: 0 4px 14px rgba(37,99,235,0.12);
}
.stm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}
.stm-hero h2, .stm-section-head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 3rem);
  letter-spacing: -0.06em;
  line-height: 1.02;
}
.stm-section-head h2 { font-size: clamp(1.4rem, 2vw, 2.15rem); }
.stm-hero p, .stm-section-head p { margin: 0; color: var(--stm-muted); }
.stm-eyebrow {
  color: var(--stm-blue) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 850;
  font-size: 0.76rem;
  margin-bottom: 8px !important;
}
.stm-hero-card, .stm-card {
  background: var(--stm-card);
  border: 1px solid var(--stm-line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.055);
}
.stm-grid { display: grid; gap: 18px; margin-top: 18px; }
.stm-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stm-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.stm-metric { padding: 16px; }
.stm-value, .stm-score {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #0f172a;
}
.stm-score { font-size: 3rem; color: var(--stm-blue-dark); }
.stm-label { font-size: 0.84rem; font-weight: 700; }
.stm-actions, .stm-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.stm-button, .stm-app a.stm-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: var(--stm-blue);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 850;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  line-height: 1;
}
.stm-button:hover { background: var(--stm-blue-dark); color: #fff !important; }
.stm-button.secondary, .stm-app a.stm-button.secondary {
  background: #e7efff;
  color: var(--stm-blue-dark) !important;
}
.stm-filter, .stm-form {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.stm-filter {
  grid-template-columns: minmax(220px, 420px) auto;
  align-items: end;
}
.stm-form label, .stm-filter label {
  display: grid;
  gap: 6px;
  font-weight: 750;
}
.stm-form input, .stm-form select, .stm-form textarea, .stm-filter select {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--stm-text);
  border-radius: 12px;
  padding: 10px 12px;
}
.stm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.stm-table th, .stm-table td {
  text-align: left;
  border-bottom: 1px solid #e5edf7;
  padding: 10px 8px;
  vertical-align: top;
}
.stm-table th {
  color: #475569;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.stm-table a { color: var(--stm-blue-dark); font-weight: 800; text-decoration: none !important; }
.stm-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-weight: 850;
  font-size: 0.76rem;
  text-transform: capitalize;
}
.stm-direction.rising { background: #dcfce7; color: var(--stm-green); }
.stm-direction.falling { background: #ffedd5; color: var(--stm-red); }
.stm-direction.flat { background: #fef9c3; color: var(--stm-yellow); }
.stm-taxonomy h4 { margin: 18px 0 8px; }
.stm-taxonomy h4:first-child { margin-top: 0; }
.stm-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stm-pill {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 750;
  font-size: 0.84rem;
}
.stm-pill:hover { background: #e8f0ff; color: var(--stm-blue-dark); }
.stm-admin .stm-app { max-width: none; margin: 12px 0 0; }
.stm-admin code {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f1f5f9;
}
@media (max-width: 900px) {
  .stm-hero, .stm-grid.two, .stm-metrics { grid-template-columns: 1fr; }
  .stm-topbar, .stm-section-head { align-items: flex-start; flex-direction: column; }
  .stm-filter { grid-template-columns: 1fr; }
}