hackathon-ENGIN/assets/app.css

:root {
  --bg: #081116;
  --panel: #101b22;
  --panel-2: #13232c;
  --line: rgba(157, 184, 197, 0.16);
  --text: #e8f1f5;
  --muted: #8fa6b2;
  --cyan: #28b7d9;
  --green: #38d996;
  --orange: #f5a524;
  --red: #ff6b57;
  --radius: 6px;
}

[data-testid="stAppViewContainer"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(40, 183, 217, 0.10), transparent 30rem),
    linear-gradient(180deg, #081116 0%, #0a141a 100%);
  color: var(--text);
}

[data-testid="stHeader"] { background: transparent; }
[data-testid="stSidebar"] { background: #0b171d; border-right: 1px solid var(--line); }
[data-testid="stMainBlockContainer"] { padding-top: 2.1rem; max-width: 1500px; }

.product-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.product-header h1 { margin: .2rem 0 .25rem; color: #f3f8fa; font-size: 2rem; line-height: 1.12; letter-spacing: -.035em; }
.product-header p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .17em; }
.runtime-badge {
  min-width: 218px;
  padding: .7rem .9rem;
  border: 1px solid rgba(56, 217, 150, .32);
  border-radius: var(--radius);
  background: rgba(56, 217, 150, .07);
  color: var(--green);
  font: 700 .72rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}
.runtime-badge span { color: var(--muted); font-size: .64rem; }
.runtime-fallback {
  border-color: rgba(245, 165, 36, .38);
  background: rgba(245, 165, 36, .08);
  color: var(--orange);
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(56, 217, 150, .07), rgba(16, 27, 34, .92));
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.status-strip > div { padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.status-strip > div:last-child { border-right: 0; }
.status-strip span, .diagnosis-metrics span { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .11em; }
.status-strip strong { display: block; margin-top: .2rem; font-size: 1.28rem; color: var(--text); }
.status-warning { border-left-color: var(--orange); background: linear-gradient(90deg, rgba(245, 165, 36, .08), rgba(16, 27, 34, .92)); }
.status-critical { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255, 107, 87, .09), rgba(16, 27, 34, .92)); }
.status-unknown {
  border-left-color: #d56cff;
  background: linear-gradient(90deg, rgba(213, 108, 255, .08), rgba(16, 27, 34, .92));
}

.diagnosis-card {
  --diagnosis-color: var(--cyan);
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.25rem;
  margin: .5rem 0 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--diagnosis-color) 12%, transparent), var(--panel));
  border: 1px solid var(--line);
  border-left: 4px solid var(--diagnosis-color);
  border-radius: var(--radius);
}
.diagnosis-card h2 { margin: .08rem 0; color: var(--text); }
.diagnosis-card p { margin: 0; color: var(--muted); }
.diagnosis-kicker { color: var(--diagnosis-color); font: 800 .68rem ui-monospace, monospace; letter-spacing: .12em; }
.diagnosis-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 1rem;
}
.diagnosis-metrics strong { display: block; margin-top: .2rem; color: var(--text); font-size: 1.05rem; }

[data-testid="stMetric"] {
  min-height: 5.2rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
[data-testid="stDataFrame"], [data-testid="stPlotlyChart"] {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
[data-testid="stDownloadButton"] button,
[data-testid="stFileUploaderDropzone"] {
  border-color: var(--line);
  border-radius: var(--radius);
}
[data-testid="stDownloadButton"] button:hover { border-color: var(--cyan); }
[data-testid="stExpander"] details {
  border-color: var(--line);
  border-radius: var(--radius);
  background: rgba(16, 27, 34, .58);
}
[data-baseweb="select"] > div { border-radius: var(--radius); }

/* Streamlit 1.62 has no interface locale setting, so localize its uploader chrome. */
[data-testid="stFileUploaderDropzone"] button [data-testid="stMarkdownContainer"] { display: none; }
[data-testid="stFileUploaderDropzone"] button::after { content: "Wybierz plik"; }
[data-testid="stFileUploaderDropzoneInstructions"] > div { display: none; }
[data-testid="stFileUploaderDropzoneInstructions"]::after {
  content: "Maks. 10 MB na plik · CSV";
  color: var(--muted);
  font-size: .875rem;
  white-space: nowrap;
}
[data-testid="stFileUploaderDropzone"] > div:not([data-testid]) > span { font-size: 0; }
[data-testid="stFileUploaderDropzone"] > div:not([data-testid]) > span::after {
  content: "Upuść plik tutaj";
  font-size: .875rem;
}

@media (max-width: 1000px) {
  .product-header { flex-direction: column; }
  .diagnosis-card { grid-template-columns: 1fr; }
  .runtime-badge { width: 100%; }
  .status-strip { grid-template-columns: repeat(2, 1fr); }
  .diagnosis-metrics { width: 100%; }
}

@media (max-width: 560px) {
  .product-header h1 { font-size: 1.65rem; }
  .status-strip { grid-template-columns: 1fr; }
  .status-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .status-strip > div:last-child { border-bottom: 0; }
  .diagnosis-metrics { grid-template-columns: 1fr; }
}