@import url('https://fonts.googleapis.com/css2?family=Saira:wght@500;900&display=swap');

:root{
      /*--bg:#0f1724;  
      --card:#0b1220;
      --accent:#4f46e5;
      --accent-2:#06b6d4;
      --glass: rgba(255,255,255,0.04);
      --text:#e6eef8;
      --muted: #9fb0c8;*/
      --bg:white;
      --text:#5b6574;
      --card-text: white;
      --main-color: #E72435;
      --main-accent-color: #a00f1b;
      --radius:14px;
    }

*{box-sizing:border-box}

html,body{height:100%}
body{
    margin:0;
    font-family: Saira, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    /*background: radial-gradient(1200px 600px at 10% 10%, rgba(79,70,229,0.08), transparent),
                linear-gradient(180deg, var(--bg), #061022 60%);  */
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    /*display:flex;
    align-items:center;
    justify-content:center;*/
    /*padding:40px;*/
}

.flex-vertical {
    display: flex;
    flex-direction: column;
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}


main {
    display: flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.container{
    width:100%;
    max-width:980px;
    text-align:center;
}

h1{
    margin:0 0 18px 0;
    font-size:28px;
    letter-spacing:-0.02em;
}
p.lead{
    margin:0 0 30px 0;
    color:var(--muted);
}

/* Grid pro 4 bloky */
.grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
    align-items:center;
    justify-items:stretch;
    margin:0 auto;
}

/* Karta / odkaz */
.card{
    display:block; /* celé pole jako odkaz */
    position:relative;
    padding:26px;
    border-radius:var(--radius);
    /*background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));*/
    background: var(--main-color);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 22px rgba(6,9,20,0.6);
    text-decoration:none;
    color:var(--card-text);
    transition:transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, filter .36s;
    overflow:hidden;
    min-height:120px;
    display:flex;
    align-items:center;
    gap:18px;
}

.card .icon{
    flex:0 0 68px;
    height:68px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:xxx-large;
    /*background: linear-gradient(135deg,var(--main-accent-color), var(--bg));*/
    background: var(--bg);
    color:white;
    /*box-shadow: 0 6px 18px rgba(79,70,229,0.18), inset 0 -6px 18px rgba(0,0,0,0.18);*/
    transform:translateZ(0);
}

.card .body{
    text-align:left;
    flex:1 1 auto;
}
.card h3{
    margin:0 0 6px 0;
    font-size:18px;
}
.card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

/* Hover efekt */
.card:hover,
.card:focus{
    transform:translateY(-8px) scale(1.02) rotate(-0.35deg);
    box-shadow: 0 22px 52px rgba(2,6,23,0.72);
    filter:brightness(1.03);
    outline: none;
}

/* Když uživatel najeďe pouze na ikonku -> trochu popout */
.card:hover .icon{
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 18px 30px rgba(6,183,212,0.12), 0 6px 18px rgba(79,70,229,0.12);
}


/* Styl pro horní lištu — vlož do <head> nebo přímo sem */
.topbar{
width:100%;
position:sticky;
top:0;
z-index: 120;
/*background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));*/
background-color: white;
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,0.03);
box-shadow: 0 4px 18px rgba(2,6,23,0.45);
}

.topbar-inner{
max-width:980px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
gap:12px;
}

/* Brand (logo + text) */
.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
}

.brand-logo{
width:44px;
height:44px;
border-radius:0px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
background: linear-gradient(135deg,var(--accent), var(--accent-2));
box-shadow: 0 6px 18px rgba(79,70,229,0.12);
flex-shrink:0;
}

.brand-text{
text-align:left;
line-height:1;
}

.brand-title{
font-weight:600;
font-size:15px;
letter-spacing:-0.01em;
}

.brand-sub{
font-size:12px;
color:var(--muted);
margin-top:2px;
}

/* Akce vpravo (např. přihlášení) */
.top-actions{
display:flex;
gap:10px;
align-items:center;
}

.top-btn{
padding:8px 12px;
border-radius:10px;
font-size:13px;
text-decoration:none;
color:var(--text);
background:transparent;
border:1px solid rgba(255,255,255,0.03);
transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.top-btn:hover,
.top-btn:focus{
transform:translateY(-3px);
background: rgba(255,255,255,0.02);
box-shadow: 0 8px 20px rgba(2,6,23,0.45);
}

.top-btn.primary{
/*background: linear-gradient(90deg,var(--accent), var(--accent-2));*/
background: linear-gradient(45deg,var(--main-color), var(--main-accent-color));
color:var(--bg);
/*border: 1px solid rgba(255,255,255,0.03);;*/
box-shadow: 0 8px 26px rgba(79,70,229,0.14);
}

.top-btn.secondary{
/*background: linear-gradient(90deg,var(--accent), var(--accent-2));*/
background: linear-gradient(45deg,rgb(165, 165, 165), rgb(121, 121, 121));
color:var(--bg);
/*border: 1px solid rgba(255,255,255,0.03);;*/
box-shadow: 0 8px 26px rgba(79,70,229,0.14);
}

.top-btn.primary:hover,
.top-btn.primary:focus{
transform:translateY(-3px) scale(1.01);
box-shadow: 0 14px 36px rgba(79,70,229,0.18);
}


/* Responsivita */
@media (max-width:740px){
    .grid{grid-template-columns:1fr; gap:14px}
    .card{min-height:96px; padding:18px}
    .card .icon{flex:0 0 54px;height:54px;font-size:22px;border-radius:10px}
    .topbar-inner{padding:10px 14px}
.brand-text{display:none} /* šetří místo na mobilu — nech jen logo */
.brand-logo{width:40px;height:40px;font-size:20px}
.top-actions{gap:8px}
.top-btn{padding:7px 10px;font-size:12px}
}

/* Focus pro přístupnost */
.card:focus-visible{
    box-shadow: 0 10px 40px rgba(33,150,243,0.16);
    transform: translateY(-6px) scale(1.01);
    outline: 3px solid rgba(79,70,229,0.12);
}


.overlay {
    position: fixed;
    top: 69px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}


/* LOGIN Z WEBU */
.login {
    z-index: 66;
    max-width: 400px;
    width: 90%;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 60px auto;
}
.login h1, h1 {
    text-align: center;
    color: #5b6574;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}
.login form {
    justify-content: center;
    padding-top: 20px;
}
.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: var(--main-color);
    color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
    width: 310px;
    max-width: 76%;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}
.login form input[type="submit"] {
    width: 100%;
    padding: 15px;
   margin-top: 20px;
    background-color: var(--main-color);
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
  background-color: var(--main-accent-color);
    transition: background-color 0.2s;
}

.error {
    color: var(--main-accent-color);
}


/* INFOBOX */
.info-box {
    margin: 20px auto;
    padding: 20px;
    border: 1px solig gray;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    max-width: 80%;
}

.info-box i {
    font-size: 30px;
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.info-box p {
    margin-bottom: 0;
}

/* INFO O VERZI */

#version {
    position: absolute;
    right: 10px;
    bottom: 10px;
}