@import url(/static/fonts/fonts.css);
/* Tokeny marki Essense (design/brand.json). Podmiana palety = zmiana tylko tutaj. */
:root{
  --brand:#3D627A; --brand-2:#A97050; --cream:#FAF7F2; --ink:#1F1D1A; --sand:#F2D5B9;
  --bg-1:#EDE6DA; --bg-2:#CBDCE4; --bg-3:#F2D5B9;
  --text:#1F1D1A; --text-soft:#4A4640; --accent:#2F5167; --accent-ink:#fff;
  --glass:rgba(255,255,255,.55); --glass-edge-1:rgba(255,255,255,.9); --glass-edge-2:rgba(255,255,255,.25);
  --glass-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 40px rgba(31,29,26,.12),0 2px 6px rgba(31,29,26,.06);
  --chart-bg:rgba(255,255,255,.88); --danger:#A33A2E; --ok:#2F6B4F;
  --r:24px; --font-h:'Antonio','Arial Narrow',sans-serif; --font-b:'Montserrat',system-ui,sans-serif;
}
[data-theme=dark]{
  --bg-1:#14171A; --bg-2:#1E3140; --bg-3:#3A2A20;
  --text:#F4EFE7; --text-soft:#C9C2B6; --accent:#8DB4CE; --accent-ink:#10202B;
  --glass:rgba(255,255,255,.09); --glass-edge-1:rgba(255,255,255,.28); --glass-edge-2:rgba(255,255,255,.05);
  --glass-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 16px 48px rgba(0,0,0,.45);
  --chart-bg:rgba(20,23,26,.82); --danger:#F08A7C; --ok:#8FD1AE;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg-1:#14171A; --bg-2:#1E3140; --bg-3:#3A2A20; --text:#F4EFE7; --text-soft:#C9C2B6; --accent:#8DB4CE; --accent-ink:#10202B;
  --glass:rgba(255,255,255,.09); --glass-edge-1:rgba(255,255,255,.28); --glass-edge-2:rgba(255,255,255,.05);
  --glass-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 16px 48px rgba(0,0,0,.45); --chart-bg:rgba(20,23,26,.82); --danger:#F08A7C; --ok:#8FD1AE}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font-b);color:var(--text);font-variant-numeric:tabular-nums;line-height:1.5;
  background:radial-gradient(900px 600px at 10% 0%,var(--bg-2),transparent 60%),radial-gradient(800px 700px at 100% 100%,var(--bg-3),transparent 55%),var(--bg-1);
  background-attachment:fixed}
h1,h2,h3{font-family:var(--font-h);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0 0 .4em}
.glass{position:relative;background:var(--glass);border-radius:var(--r);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--glass-edge-1),var(--glass-edge-2) 45%,var(--glass-edge-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 35%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--chart-bg)}}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--chart-bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.chart{background:var(--chart-bg);border-radius:18px;padding:16px}   /* wykresy na matowym podłożu */
.btn{display:inline-block;border:0;cursor:pointer;font:600 15px var(--font-b);padding:12px 24px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--glass-edge-1)}
input,select{font:500 15px var(--font-b);color:var(--text);padding:12px 16px;border-radius:14px;border:1px solid var(--glass-edge-1);background:var(--chart-bg);width:100%}
:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.sr{position:absolute;left:-9999px}
/* logowanie */
.login-body{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-card{width:min(440px,100%);padding:36px 32px;text-align:center}
.login-card img{width:160px;margin:0 auto 20px;display:block}
.login-card form{display:grid;gap:14px;margin-top:20px;text-align:left}
.msg{min-height:1.4em;font-size:14px;color:var(--text-soft)} .msg.err{color:var(--danger)}
/* aplikacja */
.topbar{position:sticky;top:12px;z-index:10;margin:12px auto 0;width:min(1200px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:10px 20px;border-radius:999px}
.topbar img{height:34px}.topbar .sp{flex:1}.topbar .who{font-size:13px;color:var(--text-soft)}
.nav{display:flex;gap:6px;overflow-x:auto}
.nav a{padding:8px 16px;border-radius:999px;color:var(--text);text-decoration:none;font-weight:500;font-size:14px;white-space:nowrap;transition:background .2s,transform .2s}
.nav a:hover{transform:translateY(-1px);background:var(--glass)}
.nav a[aria-current=page]{background:var(--accent);color:var(--accent-ink)}
main{width:min(1200px,calc(100% - 24px));margin:20px auto 120px;display:grid;gap:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{padding:22px}.card .k{font-size:13px;color:var(--text-soft)}.card .v{font:700 34px var(--font-h);letter-spacing:.03em}
.state{padding:28px;text-align:center;color:var(--text-soft)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--glass-edge-2)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.bottomnav{display:none}
@media (max-width:760px){
  .topbar .nav,.topbar .who{display:none}
  .bottomnav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:10;padding:8px;border-radius:999px;justify-content:space-around;overflow-x:auto}
  .bottomnav a{padding:10px 12px;border-radius:999px;color:var(--text);text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap}
  .bottomnav a[aria-current=page]{background:var(--accent);color:var(--accent-ink)}
  .glass{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
}
[hidden]{display:none!important}
.nav{min-width:0;flex:1 1 auto}
.topbar .sp{flex:0 1 0}
@media (max-width:1100px){.topbar .who{display:none}}
@media (max-width:1300px){.topbar .who{display:none}}
.topbar .btn{padding:8px 16px;font-size:13px}
.nav a{padding:8px 12px}