:root{
  --blue-900: #0B3D77;
  --blue-600: #1F6BBA;
  --blue-500: #3D7FC3;
  --blue-100: #EAF2FB;
  --blue-50: #F5F9FD;
  --red-600: #D71A1A;
  --red-100: #FBE7E7;
  --green-600: #2E9E5B;
  --amber-600: #E08A1E;
  --ink: #16202B;
  --grey-700: #3E4753;
  --grey-500: #6B7686;
  --grey-300: #D8DEE6;
  --grey-100: #EEF1F5;
  --bg: #F5F7FA;
  --white: #FFFFFF;
  --radius: 6px;
  --display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --body: 'Inter', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;
}

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }

/* ---------- top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 32px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-300);
  position: sticky;
  top:0;
  z-index: 50;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand a{ display:flex; line-height:0; }
.brand img{ height: 72px; display:block; }
nav.top-links{
  display:flex; gap: 26px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-700);
}
nav.top-links a{ text-decoration:none; position:relative; padding: 6px 0; }
nav.top-links a.active{ color: var(--blue-600); }
nav.top-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--red-600);
}
.contact-pill{
  display:flex; align-items:center; gap:8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey-700);
}
.contact-pill a{ text-decoration:none; color: var(--blue-600); font-weight:600; }

/* ---------- hero ---------- */
.hero{
  padding: 52px 32px 36px;
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--grey-300);
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items:center;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--red-600);
  text-transform: uppercase;
  margin-bottom:12px;
  font-weight:600;
}
h1.hero-title{
  font-family: var(--display);
  font-weight:700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height:1.05;
  color: var(--blue-900);
  margin: 0 0 12px;
}
.hero-sub{
  max-width: 520px;
  color: var(--grey-700);
  font-size: 15px;
  line-height:1.6;
  margin-bottom: 26px;
}

.search-box{
  max-width: 560px;
  background: var(--white);
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 1px 3px rgba(11,61,119,0.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box:focus-within{
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(31,107,186,0.15);
}
.search-box svg{ flex:0 0 auto; color: var(--grey-500); }
.search-box input{
  flex:1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
}
.search-box input::placeholder{ color: var(--grey-500); }
.search-box .hint{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--grey-500);
  border: 1px solid var(--grey-300);
  border-radius: 3px;
  padding: 2px 6px;
  flex: 0 0 auto;
}

.hero-banner-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
}
.hero-banner-wrap img{
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 16px rgba(11,61,119,0.12);
}
.hero-banner-wrap a{ display:block; max-width: 340px; width: 100%; }

.banner-slide{
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  position: absolute;
  inset: 0;
}
.banner-slide.is-active{
  opacity: 1;
  visibility: visible;
  position: relative;
}

.banner-dots{
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.banner-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grey-300);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.banner-dot.is-active{ background: var(--blue-600); transform: scale(1.25); }
.banner-dot:hover{ background: var(--blue-500); }

/* ---------- filter rack ---------- */
.filters{
  padding: 22px 32px;
  display:flex;
  flex-wrap:wrap;
  gap: 26px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-300);
  align-items:flex-start;
}
.filter-group{ display:flex; flex-direction:column; gap:9px; }
.filter-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family: var(--body);
  font-weight:500;
  font-size: 12.5px;
  padding: 7px 13px;
  border: 1.5px solid var(--grey-300);
  border-radius: 20px;
  background: var(--white);
  color: var(--grey-700);
  cursor:pointer;
  user-select:none;
  transition: all .15s ease;
}
.chip:hover{ border-color: var(--blue-500); color: var(--blue-600); }
.chip.active{
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}
.result-count{
  margin-left:auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-500);
  align-self:center;
  white-space:nowrap;
}
.result-count b{ color: var(--blue-600); font-weight:600; }

/* ---------- driver list ---------- */
.rack{ padding: 8px 32px 56px; }
.rack-header{
  display:grid;
  grid-template-columns: 2.1fr 1.1fr 1.2fr 1fr 0.8fr 130px;
  gap: 14px;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-500);
  border-bottom: 1.5px solid var(--grey-300);
}
.unit{
  display:grid;
  grid-template-columns: 2.1fr 1.1fr 1.2fr 1fr 0.8fr 130px;
  gap: 14px;
  align-items:center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--grey-300);
  background: var(--white);
  transition: background .15s ease;
}
.unit:hover{ background: var(--blue-50); }

.prod{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.prod .name{ font-weight:600; font-size:14.5px; color: var(--ink); }
.prod .model{ font-family: var(--mono); font-size: 11px; color: var(--grey-500); }
.cat-tag{
  display:inline-block;
  font-size: 11.5px;
  font-weight:500;
  color: var(--blue-600);
  background: var(--blue-100);
  padding: 3px 9px;
  border-radius: 12px;
}
.ver{ font-family: var(--mono); font-size:12.5px; color: var(--blue-600); font-weight:600; }
.meta{ font-family: var(--mono); font-size:11.5px; color: var(--grey-500); }
.os-icons{ display:flex; gap:7px; flex-wrap:wrap; }
.os-icons span{
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--grey-100);
  color: var(--grey-700);
}
.os-icons span.off{ opacity: 0.35; }

.dl-btn{
  font-family: var(--body);
  font-weight:600;
  font-size: 12.5px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--blue-600);
  color: var(--white);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  border:none;
  width:100%;
  display:block;
}
.dl-btn:hover{ background: var(--blue-900); }
.dl-btn.disabled{
  background: var(--grey-300);
  color: var(--grey-500);
  cursor:default;
}

.empty-state{
  padding: 60px 20px;
  text-align:center;
  color: var(--grey-500);
  font-family: var(--mono);
  font-size: 13px;
  display:none;
  background: var(--white);
}
.empty-state.show{ display:block; }

footer{
  border-top: 1px solid var(--grey-300);
  background: var(--white);
  padding: 34px 32px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  font-size: 12.5px;
  color: var(--grey-500);
}
footer .cols{ display:flex; gap:56px; flex-wrap:wrap; }
footer .col h4{
  font-family: var(--mono);
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--grey-700); margin: 0 0 10px;
}
footer .col a{ display:block; text-decoration:none; margin-bottom:7px; color: var(--grey-500); }
footer .col a:hover{ color: var(--blue-600); }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-banner-wrap{ display:none; }
  .rack-header{ display:none; }
  .unit{
    grid-template-columns: 1fr;
    gap: 8px;
    position: relative;
    padding: 18px;
  }
  .dl-btn{ margin-top:6px; }
  .filters{ padding: 20px 18px; }
  .rack{ padding: 8px 18px 46px; }
  .topbar{ padding: 12px 18px; flex-wrap: wrap; row-gap: 12px; }
  .hero{ padding: 36px 18px 26px; }
  .contact-pill{ display:none; }
  nav.top-links{
    width: 100%;
    order: 3;
    gap: 20px;
    font-size: 13px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  nav.top-links a{ white-space: nowrap; }
  .result-count{ margin-left:0; width:100%; }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */

.admin-body{ background: var(--bg); }

.login-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
}
.login-card{
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  padding: 36px 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(11,61,119,0.08);
}
.login-card a{ display:inline-block; line-height:0; }
.login-card img{ height: 32px; margin-bottom: 22px; }
.login-card h1{
  font-family: var(--display);
  font-size: 22px;
  color: var(--blue-900);
  margin: 0 0 20px;
}
.field{ margin-bottom: 16px; }
.field label{
  display:block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 6px;
}
.field input[type=text],
.field input[type=password],
.field input[type=date],
.field select{
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
}
.field input:focus, .field select:focus{
  outline:none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(31,107,186,0.15);
}
.btn{
  font-family: var(--body);
  font-weight:600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border:none;
  cursor:pointer;
  display:inline-block;
  text-decoration:none;
}
.btn-primary{ background: var(--blue-600); color: var(--white); width:100%; }
.btn-primary:hover{ background: var(--blue-900); }
.btn-secondary{ background: var(--grey-100); color: var(--grey-700); }
.btn-secondary:hover{ background: var(--grey-300); }
.btn-danger{ background: var(--red-100); color: var(--red-600); }
.btn-danger:hover{ background: var(--red-600); color: var(--white); }
.error-msg{
  background: var(--red-100);
  color: var(--red-600);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}
.success-msg{
  background: #E7F6EC;
  color: var(--green-600);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}

.admin-shell{ padding: 28px 32px 60px; max-width: 1100px; margin: 0 auto; }
.admin-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.admin-header h1{
  font-family: var(--display);
  font-size: 26px;
  color: var(--blue-900);
  margin: 0;
}

.panel{
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 24px;
}
.panel h2{
  font-family: var(--display);
  font-size: 18px;
  color: var(--blue-900);
  margin: 0 0 16px;
}
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.form-grid .span-2{ grid-column: span 2; }
.checkbox-row{ display:flex; gap:16px; flex-wrap:wrap; padding-top: 4px; }
.checkbox-row label{
  display:flex; align-items:center; gap:6px;
  font-size: 13.5px; color: var(--grey-700);
  text-transform:none; letter-spacing:0; font-family: var(--body);
}
.form-actions{ margin-top: 18px; display:flex; gap:10px; }

.admin-table{
  width:100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-table th{
  text-align:left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
  padding: 10px 10px;
  border-bottom: 1.5px solid var(--grey-300);
}
.admin-table td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
}
.admin-table tr:hover{ background: var(--blue-50); }
.row-actions{ display:flex; gap:8px; }
.row-actions .btn{ padding: 6px 12px; font-size: 12.5px; }


/* ============================================================
   NÁVODY / VIDEO NÁVODY (veřejná stránka)
   ============================================================ */

.manual-card{
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 22px;
}
.manual-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.manual-card h3{
  font-family: var(--display);
  font-size: 21px;
  color: var(--blue-900);
  margin: 0 0 4px;
}
.manual-card .manual-desc{
  color: var(--grey-700);
  font-size: 14px;
  line-height:1.55;
  max-width: 640px;
  margin: 0 0 16px;
}
.video-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.video-card{
  background: var(--bg);
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  overflow: hidden;
}
.video-frame-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #0B0D10;
}
.video-frame-wrap iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-card-title{
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.manuals-empty{
  padding: 60px 20px;
  text-align:center;
  color: var(--grey-500);
  font-family: var(--mono);
  font-size: 13px;
}

/* ============================================================
   NÁVODY — admin formulář s dynamickými video řádky
   ============================================================ */

.video-row{
  display:grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}
.video-row input{
  padding: 9px 11px;
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 13.5px;
}
.video-row input:focus{
  outline:none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(31,107,186,0.15);
}
.video-row .remove-video{
  background: var(--red-100);
  color: var(--red-600);
  border: none;
  border-radius: var(--radius);
  padding: 9px 12px;
  cursor:pointer;
  font-size: 13px;
  font-weight:600;
}
.video-row .remove-video:hover{ background: var(--red-600); color: var(--white); }
.add-video-btn{
  background: var(--blue-100);
  color: var(--blue-600);
  border: none;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  font-weight:600;
  cursor:pointer;
  margin-top: 4px;
}
.add-video-btn:hover{ background: var(--blue-600); color: var(--white); }

.admin-subnav{
  display:flex; gap:10px; margin-bottom: 20px;
}
.admin-subnav a{
  text-decoration:none;
  font-size: 13px;
  font-weight:600;
  padding: 8px 14px;
  border-radius: 20px;
  color: var(--grey-700);
  background: var(--grey-100);
}
.admin-subnav a.active{
  background: var(--blue-600);
  color: var(--white);
}

.video-count-tag{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-500);
}

@media (max-width: 900px){
  .video-row{ grid-template-columns: 1fr; }
}

/* ============================================================
   NÁVODY — vyhledávání a odlehčené video náhledy (klik-to-load)
   ============================================================ */

.video-thumb-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #0B0D10;
  cursor: pointer;
  overflow: hidden;
}
.video-thumb-wrap img{
  position: absolute; inset:0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity .15s ease;
}
.video-thumb-wrap:hover img{ opacity: 1; }
.video-play-btn{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(215,26,26,0.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  pointer-events: none;
}
.video-play-btn::after{
  content:"";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.manual-card.is-hidden{ display:none; }