/* by gateway: self-contained styling following wapp.sk (no CDN, no web fonts, one file).
   Brand values: see /pp/by/var/brand/ZDROJ.md. Red is an accent only. */
:root{
color-scheme:light;   /* always light: no automatic dark mode (user decision 2026-09-30) */
--u:8px;--r:1px;
--fs-s:13px;--fs-m:15px;--fs-l:22px;
--bg:#eff2f5;--card:#fff;--mark:#e8791e;--tint:#f4f6f8;--fg:#1d2630;--muted:#5b6673;--line:#dde3ea;--link:#131a21;
--acc:#d92b1f;--acc-h:#b8231a;--on-acc:#fff;
--ok:#1a6b3c;--ok-bg:#e6f3ec;--bad:#a5261c;--bad-bg:#fbe9e7;--warn-bg:#f6f1e1;
--shadow:none;
--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-m)/1.6 var(--font);overflow-x:hidden;
-webkit-font-smoothing:antialiased}
.shell{min-height:100vh}
.col{max-width:calc(460px + 2*16px);margin:0 auto;padding:calc(var(--u)*3) 16px}
.brand{margin:0 0 calc(var(--u)*3)}
.brand a{display:inline-block;color:var(--fg);line-height:0;border-radius:var(--r)}
.logo{height:30px;width:auto;display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:calc(var(--u)*4) calc(var(--u)*3);
box-shadow:var(--shadow)}
h1{font-size:var(--fs-l);font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0 0 calc(var(--u)*2)}
h2{font-size:var(--fs-m);font-weight:600;letter-spacing:-.005em;margin:calc(var(--u)*4) 0 var(--u);
padding-top:calc(var(--u)*3);border-top:1px solid var(--line)}
h1+h2{margin-top:calc(var(--u)*3)}
p{margin:calc(var(--u)*1.5) 0}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;
text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
label{display:block;margin:calc(var(--u)*2) 0 calc(var(--u)*.5);font-weight:500;font-size:var(--fs-s);color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],select,textarea{
display:block;width:100%;padding:10px 12px;font:inherit;color:var(--fg);background:var(--card);
border:1px solid var(--line);border-radius:var(--r)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
input[type=checkbox],input[type=radio]{margin-right:.4rem;accent-color:var(--acc)}
button,input[type=submit],.button{display:block;width:100%;margin-top:calc(var(--u)*3);padding:11px 16px;font:inherit;
font-weight:600;color:var(--on-acc);background:var(--acc);border:1px solid var(--acc);border-radius:var(--r);
cursor:pointer;text-align:center;text-decoration:none}
button:hover,input[type=submit]:hover,.button:hover{background:var(--acc-h);border-color:var(--acc-h)}
button:disabled,input[type=submit]:disabled,button[disabled]{opacity:.5;cursor:not-allowed}
.helptext,.help-text,form span.helptext,form ul{color:var(--muted);font-size:var(--fs-s)}
form ul{padding-left:1.2rem;margin:.4rem 0}
.errorlist,ul.errorlist{list-style:none;padding:6px 10px;margin:6px 0;color:var(--bad);background:var(--bad-bg);
border-radius:var(--r);font-size:var(--fs-s)}
form>p,form>div{margin:0}
form p{margin:0}
ul.messages{list-style:none;margin:0 0 calc(var(--u)*3);padding:0}
ul.messages li{padding:10px 12px;margin:0 0 var(--u);border-radius:var(--r);background:var(--warn-bg);
border-left:2px solid var(--muted);font-size:var(--fs-s)}
ul.messages li.success{background:var(--ok-bg);border-left-color:var(--ok)}
ul.messages li.error{background:var(--bad-bg);border-left-color:var(--bad)}
ul.services{list-style:none;padding:0;margin:var(--u) 0}
ul.services li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
border-bottom:1px solid var(--line)}
ul.services li:last-child{border-bottom:0}
.badge{flex:none;padding:1px 8px;border-radius:var(--r);font-size:12px;font-weight:500;letter-spacing:.01em}
.badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.badge.up{color:var(--ok);background:var(--ok-bg)}.badge.down{color:var(--bad);background:var(--bad-bg)}
.nav{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin:0 0 calc(var(--u)*3);
padding:0 0 calc(var(--u)*1.5);border-bottom:1px solid var(--line);font-size:var(--fs-s);color:var(--muted)}
.nav a{font-weight:500}
.nav .who{margin-left:auto;overflow-wrap:anywhere}
.foot{margin:calc(var(--u)*3) 0 0;color:var(--muted);font-size:12px}
hr{border:0;border-top:1px solid var(--line);margin:calc(var(--u)*3) 0}
.pw{position:relative}
.pw input{padding-right:2.8rem}
button.pw-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:2.6rem;margin:0;padding:0;display:flex;
align-items:center;justify-content:center;background:transparent;border-color:transparent;color:var(--muted)}
button.pw-toggle:hover{background:transparent;border-color:transparent;color:var(--fg)}
.muted{color:var(--muted)}
ul.menu{list-style:none;padding:0;margin:var(--u) 0}
ul.menu li{border-bottom:1px solid var(--line)}
ul.menu li:first-child{border-top:1px solid var(--line)}
ul.menu a{display:block;padding:10px 0;text-decoration:none}
ul.menu a:hover{color:var(--acc)}
button.secondary,.button.secondary{background:transparent;color:var(--fg);border:1px solid var(--line)}
button.secondary:hover,.button.secondary:hover{background:var(--tint);border-color:var(--muted)}
button.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)}
button.danger:hover{background:var(--bad-bg)}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:var(--fs-s)}
th,td{text-align:left;padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
td:nth-child(-n+2){white-space:nowrap;overflow-wrap:normal}
th{color:var(--muted);font-weight:500}
code,pre,.codes{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-s)}
.codes,pre{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
overflow-wrap:anywhere;white-space:pre-wrap}
svg,img{max-width:100%;height:auto}
fieldset{border:0;padding:0;margin:8px 0}
/* Orange right-pointing marker on navigational items. Space is always reserved (no text shift);
   state changes only via opacity. Pure-CSS triangle: no icon font, no request. */
.nav a::before,ul.menu a::before,ul.services a::before,.helptext a::before,.links a::before{
content:"";display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;
border-color:transparent transparent transparent var(--mark);margin-right:9px;vertical-align:.06em;
opacity:.6;transition:opacity .12s}
.nav a:hover::before,.nav a:focus-visible::before,ul.menu a:hover::before,ul.menu a:focus-visible::before,
ul.services a:hover::before,ul.services a:focus-visible::before,.helptext a:hover::before,
.helptext a:focus-visible::before,.links a:hover::before,.links a:focus-visible::before{opacity:1}
.side{display:none}
@media (max-width:480px){
.card{padding:calc(var(--u)*3) calc(var(--u)*2)}
table,table tbody,table tr,table td{display:block}
table thead{display:none}
table tr{padding:8px 0;border-bottom:1px solid var(--line)}
table td{border:0;padding:2px 0;white-space:normal;overflow-wrap:anywhere}
}
/* Desktop: content column left, decorative panel right. The panel image is referenced only
   inside this media query, so phones never download it. */
@media (min-width:900px){
.shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);min-height:100vh}
.col{width:100%;max-width:none;margin:0;padding:calc(var(--u)*6) clamp(32px,6vw,96px);
display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.col>*{width:100%;max-width:460px}
.col{background:var(--card)}
.side{display:block;background:var(--bg) url(panel.svg) right bottom/cover no-repeat;
-webkit-mask-image:radial-gradient(ellipse 90% 85% at 100% 100%,#000 25%,transparent 100%);
mask-image:radial-gradient(ellipse 90% 85% at 100% 100%,#000 25%,transparent 100%)}
}