:root{
  --bg:#0f1724; --bg2:#071021; --card:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.08); --accent:#00d4ff; --accent2:#ff4d9d;
  --muted:#98a0b3; --text:#e6eef8; --ok:#7efc8d; --fail:#ff7b7b; --warn:#ffd27e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;background:linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--text);padding:24px;line-height:1.45;
}

/* --- Nagłówek --- */
header{margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:16px}
h1{font-size:28px;font-weight:700;letter-spacing:.3px}
.subtitle{color:var(--muted);margin-top:6px;font-size:15px}
#summary{margin-top:12px;font-size:16px;font-weight:600;color:var(--accent)}
.col-title{margin-bottom:8px;font-size:14px;color:var(--muted)}

/* --- Układ sekcji --- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:16px}
.section h2{font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.section h2 .tag{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border);padding:2px 8px;border-radius:99px}

/* --- Listy wyników --- */
ul.report{list-style:none}
ul.report li{
  display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px dashed var(--border);font-size:14px;
}
ul.report li:last-child{border-bottom:none}
.row-name{flex:1;min-width:0}
.env-val{color:var(--muted);font-size:13px;text-align:right;word-break:break-all;max-width:60%}
.row-msg{color:var(--muted);font-size:12px;flex-basis:100%;margin-left:0;padding-top:2px}

.status{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap}
.status-ok{background:rgba(126,252,141,.15);color:var(--ok)}
.status-fail{background:rgba(255,123,123,.15);color:var(--fail)}
.status-warn{background:rgba(255,210,126,.15);color:var(--warn)}
.status-pending{background:rgba(152,160,179,.15);color:var(--muted)}

/* --- Kafelki animacji --- */
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.test-card{background:rgba(0,0,0,.2);padding:14px;border-radius:10px;border:1px solid var(--border)}
.test-card h3{font-size:15px;margin-bottom:10px}
.demo-box{height:140px;background:rgba(255,255,255,.02);display:flex;align-items:center;
  justify-content:center;border-radius:8px;overflow:hidden;position:relative}
.mover{width:48px;height:48px;border-radius:8px;background:var(--accent)}
/* --- Animacja CSS demo --- */
@keyframes lgmove{
  0%{transform:translateX(-70px) scale(1) rotate(0);background:var(--accent)}
  50%{transform:translateX(70px) scale(1.4) rotate(180deg);background:var(--accent2)}
  100%{transform:translateX(-70px) scale(1) rotate(360deg);background:var(--accent)}
}
.run-css{animation:lgmove 1.8s ease-in-out infinite}

/* --- Raport tekstowy (modal/textarea) --- */
#reportText{display:block;width:100%;min-height:340px;padding:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text);
  background:#04090f;border:1px solid var(--border);border-radius:8px;resize:vertical}

footer{margin-top:24px;color:var(--muted);font-size:13px;border-top:1px solid var(--border);padding-top:14px}

/* =========================================================================
   ORIENTACJA PIONOWA (signage 1080×1920) — większa czytelność z dystansu,
   kolumny jedna pod drugą, większe kafelki animacji.
   ========================================================================= */
@media (orientation: portrait){
  html{font-size:13px}
  body{padding:14px}
  h1{font-size:22px}
  .subtitle{font-size:12px;margin-top:3px}
  #summary{font-size:13px;margin-top:6px}
  header{margin-bottom:10px;padding-bottom:8px}
  .section{padding:12px;border-radius:10px;margin-bottom:10px}
  .section h2{font-size:15px;margin-bottom:8px}
  .col-title{font-size:12px;margin-bottom:4px}
  /* funkcje: środowisko i listy w 2 kolumnach, by oszczędzić wysokość */
  #envList{columns:2;column-gap:20px}
  #envList li{break-inside:avoid}
  .grid{gap:8px}
  ul.report li{font-size:12px;padding:4px 0}
  .row-msg{font-size:10px}
  .status{font-size:10px;padding:1px 7px}
  .env-val{font-size:11px;max-width:55%}
  /* animacje: 4 kafelki w rzędzie = niższe sekcje */
  .test-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .test-card{padding:8px}
  .test-card h3{font-size:12px;margin-bottom:6px}
  .demo-box{height:110px}
  .mover{width:42px;height:42px}
  #reportText{min-height:200px;font-size:11px;padding:8px}
}