/* Zaměřovák — společný vzhled */
:root{
  --modra:#1b5cf0; --modra-tm:#1247c4; --modra-sv:#eef3ff;
  --inkoust:#0f1722; --text:#2b3542; --sedy:#6b7686; --slaby:#9aa4b2;
  --linka:#e3e8ef; --plocha:#ffffff; --pozadi:#f6f8fb; --pozadi2:#eef2f7;
  --zelena:#0f9d58; --zelena-sv:#e8f6ef; --oranz:#e8730a; --oranz-sv:#fdf1e3;
  --cervena:#d92d20; --cervena-sv:#fdecea;
  --r:12px; --r-s:9px; --r-l:18px;
  --stin:0 1px 2px rgba(16,24,40,.05), 0 6px 20px -6px rgba(16,24,40,.10);
  --stin-s:0 1px 2px rgba(16,24,40,.06);
  --pismo:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--pismo);color:var(--text);background:var(--pozadi);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--modra);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--inkoust);line-height:1.22;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:750}
h3{font-size:1.18rem;font-weight:700}
p{margin:0 0 1em}
.obal{max-width:1140px;margin:0 auto;padding:0 20px}
.uzky{max-width:760px;margin:0 auto;padding:0 20px}

/* --- hlavička --- */
.hlava{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--linka)}
.hlava .obal{display:flex;align-items:center;gap:28px;height:64px}
.znacka{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;
  color:var(--inkoust);letter-spacing:-.03em}
.znacka:hover{text-decoration:none}
.znacka .logo{width:30px;height:30px;flex:0 0 30px}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.menu a{padding:8px 13px;border-radius:8px;color:var(--text);font-size:.94rem;font-weight:500}
.menu a:hover{background:var(--pozadi2);text-decoration:none}
.menu a.aktivni{color:var(--modra);background:var(--modra-sv)}
.hamburger{display:none;margin-left:auto;background:none;border:1px solid var(--linka);
  border-radius:8px;padding:8px 10px;cursor:pointer}

/* --- tlačítka --- */
.tl{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-s);border:1px solid transparent;
  font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;
  transition:background .14s,border-color .14s,transform .06s;white-space:nowrap}
.tl:hover{text-decoration:none}
.tl:active{transform:translateY(1px)}
.tl-hlavni{background:var(--modra);color:#fff}
.tl-hlavni:hover{background:var(--modra-tm);color:#fff}
.tl-druhy{background:#fff;color:var(--inkoust);border-color:var(--linka);box-shadow:var(--stin-s)}
.tl-druhy:hover{background:var(--pozadi2)}
.tl-tichy{background:transparent;color:var(--sedy)}
.tl-tichy:hover{background:var(--pozadi2);color:var(--inkoust)}
.tl-cerv{background:var(--cervena);color:#fff}
.tl-cerv:hover{background:#b42318;color:#fff}
.tl-maly{padding:7px 13px;font-size:.87rem}
.tl-velky{padding:14px 26px;font-size:1.03rem}
.tl:disabled{opacity:.5;cursor:not-allowed}

/* --- karty, mřížky --- */
.karta{background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r);
  padding:22px;box-shadow:var(--stin-s)}
.mrizka{display:grid;gap:20px}
.m2{grid-template-columns:repeat(2,1fr)}
.m3{grid-template-columns:repeat(3,1fr)}
.m4{grid-template-columns:repeat(4,1fr)}

/* --- formuláře --- */
label{display:block;font-weight:600;font-size:.88rem;color:var(--inkoust);margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--linka);border-radius:var(--r-s);
  font-family:inherit;font-size:.96rem;color:var(--inkoust);background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--modra);box-shadow:0 0 0 3px rgba(27,92,240,.14)}
.pole{margin-bottom:15px}
.napoveda{font-size:.83rem;color:var(--sedy);margin-top:5px}
.chyba{background:var(--cervena-sv);color:#912018;border:1px solid #f9c9c4;
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}
.uspech{background:var(--zelena-sv);color:#08603a;border:1px solid #b7e4cd;
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}
.info{background:var(--modra-sv);color:#12388f;border:1px solid #c8d9fd;
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}
.varovani{background:var(--oranz-sv);color:#93400a;border:1px solid #f8d5ab;
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}

/* --- tabulky --- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-weight:650;color:var(--sedy);font-size:.79rem;
  text-transform:uppercase;letter-spacing:.045em;padding:10px 12px;border-bottom:1px solid var(--linka)}
td{padding:11px 12px;border-bottom:1px solid var(--linka);vertical-align:middle}
tr:last-child td{border-bottom:none}
.tabulka-obal{overflow-x:auto;background:#fff;border:1px solid var(--linka);border-radius:var(--r)}

/* --- štítky --- */
.stitek{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:.76rem;font-weight:650;background:var(--pozadi2);color:var(--sedy)}
.stitek.zel{background:var(--zelena-sv);color:#08603a}
.stitek.oran{background:var(--oranz-sv);color:#93400a}
.stitek.cerv{background:var(--cervena-sv);color:#912018}
.stitek.mod{background:var(--modra-sv);color:#12388f}

/* --- patička --- */
.pata{background:var(--inkoust);color:#aab3c0;margin-top:80px;padding:52px 0 30px;font-size:.92rem}
.pata a{color:#dbe2ec}
.pata h4{color:#fff;font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.pata .obal{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.pata ul{list-style:none;padding:0;margin:0}
.pata li{margin-bottom:9px}
.pata-dole{border-top:1px solid #22304a;margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#7d8899}

@media (max-width:880px){
  .m3,.m4{grid-template-columns:repeat(2,1fr)}
  .pata .obal{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;
    flex-direction:column;padding:10px;border-bottom:1px solid var(--linka);gap:2px}
  .menu.otevreno{display:flex}
  .menu a{width:100%}
  .hamburger{display:block}
  .m2,.m3,.m4{grid-template-columns:1fr}
  .pata .obal{grid-template-columns:1fr}
}