.st { --text: var(--color-text-primary); --text2: var(--color-text-secondary); --muted: var(--color-text-tertiary); --surface: var(--color-bg-primary); --border: var(--color-border-subtle); --grid: var(--color-border-subtle); --accent: var(--s1); --radius: 6px; color: var(--text); }
.st h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
.st h3 { font-size: .95rem; font-weight: 600; margin: 0 0 8px; }
.st .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.st .tab { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 150px; text-align: left; text-decoration: none; }
.st .tab small { color: var(--text2); font-size: .75rem; }
.st .tab[aria-current="page"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.st .tab:focus-visible, .st .chip:focus-visible { outline: 2px solid var(--color-border-focus, var(--accent)); outline-offset: 2px; }
.st .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.st .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.st .tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-width: 0; }
.st .tile .lbl { font-size: .78rem; color: var(--text2); }
.st .tile .val { font-size: 1.7rem; font-weight: 600; margin-top: 2px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.st .tile .sub { font-size: .76rem; color: var(--text2); margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st .hero { font-size: 3.2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.st .heroline { font-size: .86rem; color: var(--text2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st .delta { font-size: .76rem; font-weight: 600; display: inline-flex; gap: 3px; align-items: center; }
.st .delta { color: var(--text2); } .st .up .dg { color: var(--good); } .st .down .dg { color: var(--crit); } .st .flat .dg { color: var(--text2); }
.st .meter { margin: 16px 0; }
.st .meter .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.st .meter .mn { font-size: .9rem; font-weight: 600; }
.st .meter .mv { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.st .meter .mu { font-size: .78rem; font-weight: 400; color: var(--text2); }
.st .meter .mnote { font-size: .78rem; color: var(--text2); margin-top: 6px; }
.st .mref { border-left: 2px solid var(--text); padding-left: 6px; }
.st .note { font-size: .84rem; color: var(--text2); }
.st .muted { color: var(--text2); }
.st table { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 10px; }
.st th, .st td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.st th { color: var(--text2); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.st td.num, .st th.num { text-align: right; font-variant-numeric: tabular-nums; }
.st .tablewrap { overflow-x: auto; position: relative; }
.st .tablewrap:focus-visible { outline: 2px solid var(--color-border-focus, var(--accent)); outline-offset: 2px; }
.st .pill { display: inline-flex; gap: 5px; align-items: center; font-size: .74rem; font-weight: 600; border-radius: 20px; padding: 3px 9px; border: 1px solid; white-space: nowrap; }
.st .p-good { color: var(--text); border-color: var(--good); background: rgba(12, 163, 12, .08); } .st .p-good .dg { color: var(--good); }
.st .p-warn { color: var(--text); border-color: var(--warn); background: rgba(250, 178, 25, .12); } .st .p-warn .dg { color: #8A6100; }
.st .p-crit { color: var(--text); border-color: var(--crit); background: rgba(208, 59, 59, .08); } .st .p-crit .dg { color: var(--crit); }
.st .p-info { color: var(--text2); border-color: var(--border); }
.st .rowbtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.st .chip { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 7px 13px; font: inherit; font-size: .82rem; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.st .chip[aria-pressed="true"], .st .chip[aria-current="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.st .cta { background: var(--color-primary); color: var(--color-text-on-primary); border: 0; border-radius: var(--radius); padding: 11px 16px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.st .empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
.st .empty h3 { margin-bottom: 6px; }
.st .chartbox { position: relative; margin-top: 10px; }
.st svg { display: block; width: 100%; height: auto; overflow: visible; }
.st .tip { position: absolute; pointer-events: none; background: var(--navy, #0A2540); color: #fff; font-size: .76rem; padding: 6px 9px; border-radius: 4px; white-space: nowrap; transform: translate(-50%, -115%); opacity: 0; transition: opacity .1s; }
.st .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--text2); margin-top: 8px; }
.st .legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.st ul.tight { margin: 6px 0 0; padding-left: 18px; font-size: .86rem; }
.st ul.tight li { margin: 4px 0; }
.st .gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 14px; }
.st .gauge { margin: 0; text-align: center; }
.st .gauge figcaption { font-size: .88rem; margin-top: 2px; }
.st .gauge .note { display: block; margin-top: 2px; }
.st .sample { display: inline-block; background: var(--crit); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 3px; letter-spacing: .04em; margin-bottom: 10px; }
.st .tnum { font-variant-numeric: tabular-nums; }
.st .wynik form { display: inline; }
.st td .pill { white-space: normal; }
@media (max-width: 700px) { .st .chartbox svg text { font-size: 16px; } }
@media (max-width: 480px) { .st .chartbox svg text { font-size: 26px; } }
@media (max-width: 340px) { .st .chartbox svg text { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .st .tip { transition: none; } }
@media (forced-colors: active) { .st .tab[aria-current="page"], .st .chip[aria-pressed="true"], .st .chip[aria-current="true"] { outline: 2px solid Highlight; } .st .pill, .st .tile, .st .panel { border: 1px solid CanvasText; } }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st .p-warn .dg { color: var(--warn); } :root:not([data-theme="light"]) .st .tip { background: #05080E; border: 1px solid var(--border); } }
:root[data-theme="dark"] .st .p-warn .dg { color: var(--warn); }
:root[data-theme="dark"] .st .tip { background: #05080E; border: 1px solid var(--border); }