:root{
  --db-blue:#1d4ed8;
  --db-sky:#0ea5e9;
  --db-green:#10b981;
  --db-ink:#0f172a;
  --db-muted:#64748b;
  --db-line:#e6eef8;
  --db-bg:#f6fbff;
  --db-card:#ffffff;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:var(--db-bg);
  color:var(--db-ink);
}

/* ===== Header ===== */
.db-header{ background:#0b1220; color:#fff; }
.db-header__top{
  max-width:1400px; margin:0 auto; padding:10px 14px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.db-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; min-width:210px; }
.db-brand__logo{ width:42px; height:42px; }
.db-brand__tag{ font-weight:800; letter-spacing:.02em; font-size:.88rem; opacity:.9; }

.db-search{ display:flex; align-items:center; width:100%; max-width:820px; margin:0 auto; }
.db-search__input{
  width:100%; padding:11px 12px; border-radius:10px 0 0 10px; border:1px solid #27314a; outline:none;
  background:#0f1a2f; color:#fff;
}
.db-search__input::placeholder{ color:#9fb3d0; }
.db-search__btn{
  border:none; cursor:pointer; padding:11px 14px;
  border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,var(--db-green),var(--db-sky));
  font-weight:900;
}

.db-header__actions{ display:flex; align-items:center; gap:10px; }
.db-lang__select{
  background:#0f1a2f; border:1px solid #27314a; color:#fff; padding:10px 10px; border-radius:10px;
  font-weight:800;
}
.db-user{ text-decoration:none; color:#fff; display:flex; flex-direction:column; line-height:1.05; padding:6px 8px; border-radius:10px; }
.db-user:hover{ background:#121f38; }
.db-user__hello{ font-size:.8rem; opacity:.85; }
.db-user__name{ font-weight:900; font-size:.95rem; }
.db-back{
  background:#0f1a2f; border:1px solid #27314a; color:#fff; padding:10px 10px; border-radius:10px;
  cursor:pointer; font-weight:800;
}
.db-back:hover{ background:#121f38; }
.db-cart{ text-decoration:none; color:#fff; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid #27314a; background:#0f1a2f; }
.db-cart:hover{ background:#121f38; }
.db-cart__icon{ font-size:1.2rem; }
.db-cart__meta{ display:flex; flex-direction:column; line-height:1.05; }
.db-cart__count{ font-weight:900; }
.db-cart__total{ font-size:.82rem; opacity:.9; }

.db-header__bottom{ background:#0f1a2f; border-top:1px solid #24304a; }
.db-nav{ max-width:1400px; margin:0 auto; padding:8px 14px; display:flex; gap:16px; flex-wrap:wrap; }
.db-nav__link{ color:#dbeafe; text-decoration:none; font-weight:800; padding:6px 10px; border-radius:999px; }
.db-nav__link:hover{ background:#172849; }

.db-main{ min-height:60vh; }

/* ===== Footer ===== */
.db-footer{ margin-top:40px; background:#07101f; color:#dbeafe; }
.db-footer__grid{
  max-width:1400px; margin:0 auto; padding:28px 14px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.db-footer h4{ margin:0 0 10px; color:#fff; }
.db-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.db-footer a{ color:#c7ddff; text-decoration:none; }
.db-footer a:hover{ text-decoration:underline; }
.db-footer__bottom{
  max-width:1400px; margin:0 auto; padding:14px 14px 18px;
  border-top:1px solid #22314f;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.db-footer__pill{ border:1px solid #22314f; padding:6px 10px; border-radius:999px; color:#e0f2fe; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .db-header__top{ grid-template-columns:1fr; }
  .db-brand{ justify-content:center; }
  .db-header__actions{ justify-content:center; flex-wrap:wrap; }
  .db-search{ max-width:none; }
  .db-footer__grid{ grid-template-columns:1fr; }
}