:root{
    --navy:#0b345d;
    --navy2:#164a78;
    --blue:#0569d8;
    --blue-dark:#0d4e94;
    --text:#11365e;
    --muted:#355b7f;
    --line:#d6e0e8;
    --bg:#edf4f8;
    --card:#fff;
    --shadow:0 10px 25px rgba(30,65,95,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#f6fafc,#edf4f7 75%,#eef4f7);
}
a{color:inherit}
button,input,select,textarea{font:inherit}

/* top */
.topbar{
    height:45px;
    background:linear-gradient(90deg,#0d3a64,#0b3158 55%,#0b345d);
    color:#fff;
}
.topbar-inner{
    max-width:1500px;
    height:100%;
    margin:auto;
    padding:0 66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.top-left,.top-nav{display:flex;align-items:center;gap:18px}
.top-left strong{font-size:16px}
.sep,.top-nav span{opacity:.55}
.top-nav a{
    text-decoration:none;
    color:#fff;
    font-size:14px;
    opacity:.95;
}
.top-nav a:hover{opacity:1;text-decoration:underline}

/* compact hero */
.hero{
    height:150px;
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1.55fr 1fr;
    align-items:center;
    padding:0 6.5%;
    border-bottom:1px solid #d8e4ec;
    background:#f7fbfd;
}
.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}
.hero-left,.hero-center,.hero-right{
    position:relative;
    z-index:2;
}
.hero-left{
    justify-self:start;
    padding-left:10px;
}
.handwrite{
    font-family:"Segoe Print","Segoe Script","Comic Sans MS",cursive;
    font-size:22px;
    line-height:1.02;
    font-style:italic;
    font-weight:600;
    transform:rotate(-5deg);
    color:#0b3d74;
}
.swash{
    width:150px;
    height:3px;
    background:var(--blue);
    border-radius:999px;
    margin:7px 0 0 26px;
    transform:rotate(-8deg);
}
.hero-center{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    transform:translateY(-1px);
}
.brand-logo{
    width:128px;
    height:76px;
    color:#0f4f8f;
    flex:0 0 auto;
}
.brand-logo svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.brand-copy h1{
    margin:0;
    color:var(--blue);
    font-size:40px;
    line-height:.98;
    letter-spacing:-1.4px;
    font-weight:800;
    white-space:nowrap;
}
.brand-copy>div{
    margin-top:5px;
    font-family:"Segoe Print","Segoe Script","Comic Sans MS",cursive;
    font-size:18px;
    line-height:1.1;
    font-style:italic;
    color:#123e70;
    text-align:center;
}
.blue-line{
    display:block;
    width:120px;
    height:3px;
    background:var(--blue);
    border-radius:999px;
    margin:3px 0 0 auto;
    transform:rotate(-6deg);
}
.hero-right{
    justify-self:end;
    text-align:center;
    display:flex;
    align-items:center;
    gap:10px;
    padding-right:4px;
}
.runner{
    width:88px;
    height:70px;
    fill:none;
    stroke:#a9bfd0;
    stroke-width:9;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.48;
}
.right-title{
    min-width:130px;
    font-weight:800;
    font-size:15px;
    line-height:1.12;
    color:#123e68;
}

/* cards */
main{
    max-width:1500px;
    margin:0 auto;
    padding:22px 48px 56px;
}
.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--card-gap,18px);
    width:min(100%, var(--cards-width,1404px));
    margin-left:auto;
    margin-right:auto;
}
.card{
    height:var(--card-height,176px);
    min-height:0;
    position:relative;
    background:rgba(255,255,255,.92);
    border:1px solid #d7e1e9;
    border-radius:18px;
    box-shadow:var(--shadow);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:22px 34px;
    transition:.16s ease;
}
.card:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 32px rgba(30,65,95,.13);
    border-color:#bdd0df;
}
.icon{
    width:60px;height:60px;color:var(--blue);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:8px;
}
.icon svg{
    width:58px;height:58px;
    fill:none;stroke:currentColor;stroke-width:4;
    stroke-linecap:round;stroke-linejoin:round;
}
.card h2{
    margin:0;
    font-size:22px;
    letter-spacing:-.4px;
}
.card p{
    margin:5px 0 0;
    font-size:15px;
    color:#315b80;
    text-align:center;
}
.chev{
    position:absolute;
    right:20px;
    bottom:42px;
    font-size:34px;
    font-weight:300;
    color:#0e4b84;
}

/* footer */
footer{
    min-height:76px;
    background:linear-gradient(90deg,#0d3a64,#0b3158 55%,#0b345d);
    color:#fff;
}
.footer-inner{
    max-width:1500px;
    min-height:76px;
    margin:auto;
    padding:0 66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    font-size:15px;
}
.footer-inner span{opacity:.55;margin:0 14px}

/* forms / admin */
.auth-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#e8f2f8,#c9dce9);padding:30px
}
.auth-box{
    width:min(460px,100%);background:#fff;border:1px solid #d2dfe8;border-radius:20px;
    box-shadow:0 24px 60px rgba(15,55,90,.14);padding:34px
}
.auth-brand{font-weight:800;color:var(--blue);font-size:18px}
.auth-box h1{margin:8px 0}
.stack{display:grid;gap:15px;margin-top:22px}

label{display:grid;gap:7px;font-size:14px;font-weight:700}
input,select,textarea{
    width:100%;border:1px solid #cad8e3;border-radius:10px;
    padding:10px 11px;background:#fff;color:#163c63;outline:none
}
textarea{min-height:95px;resize:vertical}
input:focus,select:focus,textarea:focus{
    border-color:#6da5dc;box-shadow:0 0 0 3px rgba(0,103,215,.08)
}
.btn{
    min-height:42px;padding:9px 15px;border-radius:10px;border:1px solid transparent;
    display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
    cursor:pointer;font-weight:750
}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:#055dbf}
.btn.ghost{background:#fff;border-color:#cbd8e2}
.btn.ghost.light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}
.btn.danger-outline{background:transparent;border-color:#de8d8d;color:#ffe8e8}
.alert{padding:12px 14px;border-radius:10px;margin:12px 0 18px}
.alert.ok{background:#e8f6ee;color:#226e47}
.alert.error{background:#fff0f0;color:#a02d2d}

.admin-page{background:#edf3f7}
.admin-top{
    height:68px;background:linear-gradient(90deg,#0d3a64,#0b3158);color:#fff;
    padding:0 34px;display:flex;align-items:center;justify-content:space-between
}
.admin-top>div{display:flex;align-items:center;gap:12px}
.admin-top strong{font-size:20px}
.admin-top span{opacity:.7}
.admin-container{max-width:1260px;margin:28px auto;padding:0 22px 50px}
.panel{
    background:#fff;border:1px solid #d3dfe8;border-radius:18px;
    box-shadow:var(--shadow);padding:var(--card-padding,24px);margin-bottom:22px
}
.panel h1,.panel h2{margin-top:0}
.panel p{color:#627b90}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;margin-top:18px}
th,td{padding:12px 10px;border-bottom:1px solid #e5edf2;text-align:left;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#72879b}
td small{display:block;color:#71869a;margin-top:3px}
.url{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inline{display:flex;gap:6px;align-items:center}
.square,.mini{
    border:1px solid #cbd8e2;background:#fff;border-radius:8px;cursor:pointer;
    padding:6px 9px;text-decoration:none;color:#163c63
}
.square{width:31px;height:31px;padding:0}
.mini.danger{color:#a02d2d;border-color:#e5c1c1}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}
.badge.on{background:#e8f5ed;color:#257246}
.badge.off{background:#f1f3f5;color:#7a8791}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wide{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}
.actions{display:flex;gap:10px}

/* responsive */
@media (max-width:1050px){
    .topbar-inner,.footer-inner{padding-left:28px;padding-right:28px}
    .hero{grid-template-columns:.8fr 1.6fr .8fr;padding:0 3%}
    .cards{grid-template-columns:repeat(2,1fr)}
    .hero-left .handwrite{font-size:20px}
    .brand-copy h1{font-size:36px}
}
@media (max-width:740px){
    .topbar{height:45px}
    .topbar-inner{min-height:45px;padding:6px 16px}
    .top-nav{display:none}
    .top-left{font-size:14px;gap:10px}
    .hero{height:125px;display:flex;justify-content:center;padding:0 12px}
    .hero-left,.hero-right{display:none}
    .brand-logo{width:86px;height:64px}
    .brand-copy h1{font-size:34px}
    .brand-copy>div{font-size:16px}
    main{padding:16px 14px 34px}
    .cards{grid-template-columns:1fr;gap:12px}
    .card{
        height:calc(176px * var(--card-scale,100) / 100);
        min-height:0;
    }
    .footer-inner{padding:18px;min-height:84px;flex-direction:column;justify-content:center;text-align:center;gap:8px}
    .admin-top{height:auto;padding:14px 16px;flex-direction:column;align-items:flex-start;gap:10px}
    .admin-container{padding:0 12px 28px}
    .panel{padding:17px}
    .panel-head{flex-direction:column}
    .grid-form{grid-template-columns:1fr}
    .wide{grid-column:auto}
}

.brand-logo .logo-tree,
.brand-logo .control-flag{
    fill:none;
    stroke:currentColor;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.brand-logo .control-flag rect{
    fill:rgba(5,105,216,.05);
}


/* vlastní banner nahraný přes administraci */
.hero.hero-custom{
    height:150px;
    padding:0;
    display:block;
    background:#f7fbfd;
}
.hero.hero-custom img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.banner-preview{
    margin:14px 0 18px;
    border:1px solid #d5e0e8;
    border-radius:12px;
    overflow:hidden;
    background:#f4f8fb;
}
.banner-preview img{
    display:block;
    width:100%;
    max-height:220px;
    object-fit:contain;
}
.banner-upload-form{
    display:grid;
    gap:14px;
    max-width:620px;
}
.banner-delete-form{
    margin-top:12px;
}

@media (max-width:740px){
    .hero.hero-custom{
        height:125px;
    }
}

.grid-form label small{
    font-weight:400;
    color:#6d8294;
    line-height:1.35;
}




/* procentuální změna celé velikosti dlaždic */
.card{
    height:var(--card-height,176px);
    padding:var(--card-padding,24px);
}
.card .icon,
.card-icon{
    width:var(--icon-size,50px);
    height:var(--icon-size,50px);
}
.card h2,
.card h3,
.card-title{
    font-size:var(--card-title-size,20px);
}
.card p,
.card-subtitle{
    font-size:var(--card-text-size,14px);
}

.range-row{
    display:flex;
    align-items:center;
    gap:14px;
}
.range-row input[type="range"]{
    flex:1;
    min-width:220px;
}
.range-row strong{
    min-width:62px;
    text-align:right;
}

@media (max-width:1100px){
    .cards{
        width:min(100%, var(--cards-width,1404px));
    }
}

@media (max-width:740px){
    /* Na mobilu zůstává jedna dlaždice na řádek, ale výška se řídí nastaveným procentem. */
    .cards{
        width:100%;
    }
    .card{
        height:var(--card-height,176px);
    }
}