@font-face{font-family:"Barlow";src:url(fonts/Barlow-Regular.ttf);font-weight:400}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-Medium.ttf);font-weight:500}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-SemiBold.ttf);font-weight:600}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-Bold.ttf);font-weight:700}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-SemiBold.ttf);font-weight:600}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-Bold.ttf);font-weight:700}
:root{
  --paper:#FAF9F7; --surface:#FFFFFF; --surface-2:#F2F0ED;
  --ink:#1D1D1B; --ink-2:#57534E; --ink-3:#8A847D;
  --line:#DBD5CE; --line-strong:#B8B0A7;
  --accent:#FE5000;
  --crit:#A61B1B; --major:#9A6410; --ok:#2F6B4F;
  --rail-bg:#1D1D1B; --rail-fg:#FAF9F7;
  --shadow:0 1px 2px rgba(29,29,27,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Barlow","Segoe UI",Arial,sans-serif;font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;display:flex;min-height:100vh}
h1,h2,h3{font-family:"Barlow Condensed","Barlow",Arial,sans-serif;margin:0;font-weight:600;
  letter-spacing:.01em;text-wrap:balance}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}

/* ---- rail ---- */
.rail{background:var(--rail-bg);color:var(--rail-fg);width:210px;flex:0 0 210px;
  padding:20px 0;display:flex;flex-direction:column;gap:4px}
.rail .brand{font-family:"Barlow Condensed";font-weight:700;font-size:21px;
  letter-spacing:.04em;padding:0 20px 14px;line-height:1.05}
.rail .brand span{color:var(--accent)}
.rail a{color:rgba(255,255,255,.82);padding:9px 20px;font-size:14.5px;
  border-left:3px solid transparent}
.rail a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.rail a.active{color:#fff;border-left-color:var(--accent);background:rgba(255,255,255,.08)}
.rail-form{margin:0}
.rail-form button{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;
  color:rgba(255,255,255,.82);padding:9px 20px;font:inherit;font-size:14.5px;cursor:pointer}
.rail-form button:hover{color:#fff;background:rgba(255,255,255,.06)}
.rail-form button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rail .beta{display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#1D1D1B;background:var(--accent);
  padding:1px 5px;margin-left:4px;vertical-align:2px;line-height:1.4}
.rail .sec{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.4);padding:16px 20px 4px}
.rail .spacer{flex:1}
.rail .me{padding:12px 20px 0;font-size:12.5px;color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.12);margin-top:10px}

/* ---- main ---- */
main{flex:1;min-width:0;padding:30px 34px 60px;max-width:1100px}
main.wide{max-width:none}
.page-h{display:flex;align-items:baseline;gap:12px 14px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:22px}
.page-h h1{font-size:26px}
/* vodorovny scroll pro siroky obsah (tabulky) na uzkych displejich */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x>table{min-width:560px}
.flash{padding:10px 14px;border-left:3px solid var(--accent);background:var(--surface-2);
  margin-bottom:18px;font-size:14.5px}
.flash.err{border-left-color:var(--crit);color:var(--crit)}
.flash.ok{border-left-color:var(--ok);color:var(--ok)}

.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:20px 22px;margin-bottom:18px}
.card h2{font-size:19px;margin-bottom:12px}

label{display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=month],input[type=date],input[type=file],select,textarea{width:100%;padding:9px 11px;
  border:1px solid var(--line-strong);background:var(--surface);font:inherit;color:var(--ink)}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
input[readonly]{background:var(--surface-2);color:var(--ink-2);cursor:default}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;padding:10px 18px;
  font-family:"Barlow Condensed";font-weight:600;font-size:15px;letter-spacing:.03em;
  cursor:pointer;text-transform:uppercase}
.btn:hover{filter:brightness(.94);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong)}
.btn.small{padding:5px 10px;font-size:12.5px}
.btn.danger{background:var(--crit)}

table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--surface-2);font-family:"Barlow Condensed";font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.pill{display:inline-block;font-size:11px;padding:2px 7px;border:1px solid var(--line-strong);
  background:var(--surface-2);letter-spacing:.04em}
.pill.off{color:var(--ink-3);opacity:.6}

.auth-wrap{margin:auto;width:100%;max-width:380px}
.auth-wrap .brand{font-family:"Barlow Condensed";font-weight:700;font-size:28px;
  letter-spacing:.04em;text-align:center;margin-bottom:6px}
.auth-wrap .brand span{color:var(--accent)}
.auth-wrap .sub{text-align:center;color:var(--ink-3);font-size:13px;margin-bottom:22px}
.muted{color:var(--ink-3);font-size:13.5px}
.chk{display:flex;gap:8px;align-items:center;margin:6px 0}
.chk input{width:auto}
.chk label{margin:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
@media (max-width:720px){
  body{flex-direction:column}
  .rail{width:100%;flex-basis:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:2px;padding:8px 10px}
  .rail .brand{padding:0 8px 0 4px;width:auto;font-size:18px}
  .rail .sec,.rail .spacer,.rail .me{display:none}
  .rail a{padding:8px 12px;border-left:0;border-bottom:3px solid transparent;
    font-size:13.5px;border-radius:2px}
  .rail a.active{border-left:0;border-bottom-color:var(--accent)}
  .rail-form button{width:auto;padding:8px 12px;border-left:0;font-size:13.5px}
  main{padding:20px 16px 48px}
  .page-h h1{font-size:23px}
  .card{padding:16px 15px}
  table{font-size:13px}
  th,td{padding:7px 8px}
  .btn.small{padding:8px 12px;font-size:12.5px}
}
@media (max-width:430px){
  main{padding:16px 12px 40px}
  .page-h h1{font-size:21px}
  .rail a{padding:7px 9px;font-size:13px}
  body{font-size:15px}
}