:root{
    --bg:#e6f1fb;
    --text:#2a3b4f;
    --blue:#2e90ff;
    --border:#dbe8f7;
    --hover:#f3f7ff;
    --shadow:0 12px 28px rgba(32,74,128,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Inter,system-ui,"Noto Sans SC",sans-serif;background:#f5f8fd;color:var(--text)}

  .header{position:sticky;top:0;z-index:1000;background:var(--bg);border-bottom:1px solid #fff}
  .wrap{width:min(1240px,96vw);margin:0 auto}
  .header-inner{height:60px;display:flex;align-items:center;gap:16px}
  .logo img{width:38px;height:24px;object-fit:contain}

  /* nav */
  .nav{display:flex;gap:24px;align-items:center;list-style:none;flex:1;font-weight:700;color:#334a63}
  .nav a{padding:10px 2px;text-decoration:none;color:inherit;font-size:15px;transition:.15s}
  .nav a:hover{color:#0a58ff}
  .nav a.active{color:#0a58ff;position:relative}
  .nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--blue);border-radius:3px}

  /* dropdown */
  .has-dropdown{position:relative}
  .dropdown-scroll {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 20px 10px;
    min-width: 400px;
    max-width: 675px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 9999;
  }

  .has-dropdown:hover .dropdown-scroll {
    opacity: 1;
    pointer-events: auto;
  }

  .scroll-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0 10px;
  }
  .scroll-container::-webkit-scrollbar{height:6px}
  .scroll-container::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}
  .scroll-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
  .scroll-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}
  
  .scroll-btn{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;z-index:10000}
  .scroll-prev{left:6px}.scroll-next{right:6px}
  .card{flex:0 0 auto;width:180px;height:240px;background:#f1f6ff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px}
  .card img{max-width:100%;height:120px;object-fit:contain}
  .card .title{font-weight:700;margin:8px 0}
  .card .play{background:var(--blue);border:none;color:#fff;font-weight:700;padding:6px 14px;border-radius:20px;cursor:pointer}
  .card .play:hover{background:#1c6fe0}

  /* right side */
  .right{display:flex;align-items:center;gap:12px}
  .account{position:relative}
  .user-chip{display:flex;align-items:center;gap:10px;background:#fff;padding:6px 10px;border-radius:999px;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:700;cursor:pointer}
  .avatar{width:28px;height:28px;border-radius:50%;background:#d9e7ff url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=100&auto=format&fit=crop') center/cover}
  .user-balance{color:#0d6efd;font-weight:800}
  .acc-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px 0;opacity:0;transform:translateY(10px);pointer-events:none;transition:all .25s ease;z-index:10001}
  .acc-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
  .acc-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:#334a63;text-decoration:none;cursor:pointer;transition:.2s}
  .acc-item:hover{background:var(--hover);color:#0a58ff}
  .acc-item.logout{border-top:1px solid #e9eef5;margin-top:4px;padding:12px 14px;font-weight:700;color:#cf3e3e}
  .acc-item.logout:hover{background:#fff2f2;color:#a82121}
  .lang{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:700;color:#5b6f86}
  
  .nav-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-right: 20px;
}

.nav-icons .icon svg {
  width: 32px;
  height: 32px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}

.nav-icons .icon svg:hover {
  color: #007bff;
}
/* випадаюче меню на всю ширину */
.dropdown-full {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100vw;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 30px 60px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 9999;
}

.has-dropdown:hover .dropdown-full {
  width: 100%;
  opacity: 1;
  transform: translateY(0);
}

/* грід-сітка */
.grid-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
}

.grid-item {
  background: #f8fbff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  text-align: center;
  transition: 0.2s;
}

.grid-item:hover {
  transform: translateY(-4px);
}

.grid-item img {
  width: 100%;
  max-width: 120px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 12px;
}

.grid-item .title {
  font-weight: 700;
  color: #334a63;
  font-size: 14px;
}


/* full width dropdown */
.dropdown-full {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100vw;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 40px 60px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all .25s ease;
  z-index: 9999;
}

.has-dropdown:hover .dropdown-full {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* grid layout */
.grid-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px;
}

.grid-item {
  background: #f8fbff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  text-align: center;
  transition: 0.2s;
}

.grid-item:hover {
  transform: translateY(-4px);
}

.grid-item img {
  width: 100%;
  max-width: 120px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 12px;
}

.grid-item .title {
  font-weight: 700;
  color: #334a63;
  font-size: 14px;
}

.nav-icons-5{
  display:flex;
  align-items:center;
  gap:18px;
  margin-right:12px;
}

.nav-icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#6b7688;
  line-height:1;
  position:relative;
}

.nav-icon-item .icon-30{
  width:20px;
  height:20px;
}

.nav-icon-item span{
  margin-top:6px;
  font-size:14px;
}

.nav-icon-item::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px;
  width:28px;
  height:3px;
  border-radius:3px;
  background:transparent;
}

.nav-icon-item:hover,
.nav-icon-item.is-active{
  color:#14b8a6;
}

.nav-icon-item.is-active::after{
  background:#14b8a6;
}
.right { display: flex; align-items: center;  }

/* інпути у стилі як на скрін */
.right input {
  height: 32px;
  width: 60px;
  border: 1px solid #dbe8f7;
  border-radius: 20px;
  padding: 0 10px;
  font-size: 14px;
  outline: none;
  background: #f5f8fd;
  color: #2a3b4f;
}

.right input:focus {
  border-color: #2e90ff;
  background: #fff;
  box-shadow: 0 0 4px rgba(46,144,255,.4);
}

.guest-auth { display: flex; align-items: center; gap: 8px; }
.guest-auth .btn {
  padding: 0 14px;
  height: 32px;
  line-height: 32px;
  border-radius: 20px;
  border: 1px solid #dbe8f7;
  text-decoration: none;
  color: #2a3b4f;
  font-size: 14px;
  background: #fff;
}
.guest-auth .btn.login { background: #2e90ff; color: #fff; border-color:#2e90ff; }
.guest-auth .btn.login:hover { filter: brightness(1.05); }
/* ===== NAVBAR: гість (логін-форма) ===== */

/* контейнер справа */
.right.account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  height: var(--header-h, 60px);
  padding-right: 12px;
}

/* не даємо формі ламатись/переноситись */
#navLoginForm.nav-login-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* інпути */
#navLoginForm .nav-input.short {
  height: 36px;
  min-width: 60px;
  padding: 0 12px;
  border: 1px solid var(--border, #dbe8f7);
  border-radius: 999px;
  background: #fff;
  color: var(--text, #2a3b4f);
  font-size: 14px;
  line-height: 36px;
  outline: none;
  box-shadow: 0 2px 8px rgba(32,74,128,.08);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

#navLoginForm .nav-input.short::placeholder{
  color: #96a3b6;
}

#navLoginForm .nav-input.short:focus{
  border-color: var(--blue, #2e90ff);
  box-shadow: 0 0 0 3px rgba(46,144,255,.18);
  background: #fff;
}

/* кнопка Увійти */
#navLoginForm .nav-btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--blue, #2e90ff);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(46,144,255,.25);
  transition: transform .06s ease, box-shadow .2s, background .2s;
}

#navLoginForm .nav-btn:hover {
  background: #1f7cf0;
  box-shadow: 0 8px 20px rgba(31,124,240,.28);
}

#navLoginForm .nav-btn:active {
  transform: translateY(1px);
}

/* щоб хедер не "стрибав", коли з'являється тінь */
.header, .topbar, .site-header {
  will-change: transform;
}

/* мобільна адаптація */
@media (max-width: 900px){
  #navLoginForm .nav-input.short{
    min-width: 60px;
  }
  .right.account{ padding-right: 6px; gap: 6px; }
}
.right.account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  height: var(--header-h, 60px);
  padding-right: 16px;
}

#navLoginForm.nav-login-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h, 60px);
  padding: 0 16px;
}
/* === User Info inputs only === */
#userInfoForm{
  --h:44px;
  --r:10px;
  --line:#dbe8f7;
  --ink:#2a3b4f;
  --muted:#7e8aa6;
  --focus:#2e90ff;
}

/* сітка з оригіналу: 2 колонки */
#userInfoForm .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
}

/* елемент форми */
#userInfoForm .form-item{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#userInfoForm .form-item > label{
  font-size:14px;
  color:var(--muted);
  line-height:1;
}

/* уніфікація всіх інпутів/селектів */
#userInfoForm input[type="text"],
#userInfoForm input[type="tel"],
#userInfoForm input[type="email"],
#userInfoForm input[type="date"],
#userInfoForm input[type="number"],
#userInfoForm select,
#userInfoForm .el-input__inner{
  height:var(--h);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  padding:0 14px;
  font:14px/1.2 Inter,system-ui,"Noto Sans SC",sans-serif;
  color:var(--ink);
  width:100%;
  outline:none;
  transition:border .15s, box-shadow .15s, background .15s;
  box-shadow:0 1px 0 rgba(17,24,39,.02) inset;
}

/* placeholder як на оригіналі */
#userInfoForm input::placeholder{ color:#a7b3c8; }

/* фокус */
#userInfoForm input:focus,
#userInfoForm select:focus,
#userInfoForm .el-input__inner:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(46,144,255,.15);
}

/* select — стрілка та правий відступ */
#userInfoForm select{
  appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2390a4c2'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}

/* date input — вирівнюємо іконку/поле */
#userInfoForm input[type="date"]{
  padding-right:12px;
}
#userInfoForm input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.8;
  margin-right:4px;
}

/* disabled (на майбутнє) */
#userInfoForm input[disabled],
#userInfoForm select[disabled]{
  background:#f7faff;
  color:#a7b3c8;
}

/* email — на весь ряд як у макеті */
#userInfoForm .form-item.full{
  grid-column:1 / -1;
}

/* мобільно — одна колонка */
@media (max-width:1024px){
  #userInfoForm .form-grid{ grid-template-columns:1fr; }
}

/* ===== compact auth block (тільки для цього фрагмента) ===== */
.right.account { margin-left:auto; }

.right.account .nav-login-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

/* короткі інпути */
.right.account .nav-input.short{
  width:60px;
  height:32px;
  padding:0 10px;
  border:1px solid var(--border, #dbe8f7);
  border-radius:16px;
  background:#fff;
  font-size:12px;
  line-height:32px;
  color:var(--text, #2a3b4f);
}
.right.account .nav-input.short::placeholder{ color:var(--muted, #7e8aa6); }
.right.account .nav-input.short:focus{
  border-color:var(--blue, #2e90ff);
  box-shadow:0 0 0 3px rgba(46,144,255,.15);
  outline:none;
}

/* кнопка входу */
.right.account .nav-btn{
  height:32px;
  padding:0 12px;
  border-radius:16px;
  border:1px solid var(--blue, #2e90ff);
  background:var(--blue, #2e90ff);
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:32px;
  cursor:pointer;
}
.right.account .nav-btn:hover{ filter:brightness(.98); }
.right.account .nav-btn:active{ transform:translateY(1px); }

/* адаптив: ще компактніше на вужчих екранах */


/* контейнер */
.right.account { display:flex; align-items:center; }
.nav-login-form { display:flex; align-items:center; gap:8px; }

/* чіп-інпути як на pc.dfbiu */
.nav-input.short{
  width:60px; height:32px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9999px;
  background:#f3f7ff;
  color:var(--text);
  font-size:13px; line-height:32px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.nav-input.short::placeholder{ color:#7e8aa6; }
.nav-input.short:focus{
  background:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(46,144,255,.15);
}

/* кнопки */
.nav-btn{
  height:32px; padding:0 16px;
  border-radius:9999px;
  border:1px solid transparent;
  font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
}
.nav-btn.primary{
  background:var(--blue); color:#fff; border-color:#1f6fd9;
}
.nav-btn.ghost{
  background:#f3f7ff; color:var(--text); border:1px solid var(--border);
}
.nav-btn:hover{ filter:brightness(1.03); }

/* селект мови як чіп */
.lang-select{
  height:32px; padding:0 30px 0 12px;
  border:1px solid var(--border);
  border-radius:9999px;
  background:#f3f7ff;
  font-size:13px; color:var(--text);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%237e8aa6'><path d='M5 7l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.lang-select:focus{
  background:#fff; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(46,144,255,.15);
}

/* щоб не ламати хедер на малих ширинах */
@media (max-width: 1100px){
  .nav-input.short{ width:60px; }
  .nav-login-form{ gap:6px; }
}

/* Логотип - зменшуємо */
.header-inner > div img[alt="logo"] {
  max-width: 80px;
  height: auto;
}

/* Фіксована ширина для мобільних */
@media (max-width: 1100px){
  body {
    min-width: 1220px;
  }
}