:root{ --bg:#0b0e13; --card:#11161d; --card-bd:rgba(255,255,255,.08); --brand:#35e0b5; --bb-h:64px; }
[data-bs-theme="light"]{ --bg:#f6f7f9; --card:#ffffff; --card-bd:rgba(0,0,0,.10); }
body{background:var(--bg); color:#e7edf3; padding-bottom: calc(var(--bb-h) + env(safe-area-inset-bottom));}
[data-bs-theme="light"] body{ color:#111827; }
.navbar{border-bottom:1px solid var(--card-bd)}
.navbar .navbar-brand{ padding-top:.25rem; padding-bottom:.25rem; line-height:1.1; }
.navbar .navbar-nav .nav-link{ padding-top:.25rem; padding-bottom:.25rem; line-height:1.1; }
.navbar .navbar-toggler{ padding:.15rem .35rem; }
.navbar .navbar-toggler-icon{ width:1.1em; height:1.1em; }
.pill{border-radius:999px}
.btn-brand{background:var(--brand); color:#081016; border:none}
.btn-brand:hover{filter:brightness(.95)}
.badge-soft{background:rgba(255,255,255,.08); border:1px solid var(--card-bd); color:#cdd6de}
.shadow-soft{box-shadow:0 10px 28px rgba(0,0,0,.25)}
.card-spot{background:var(--card); border:1px solid var(--card-bd); overflow:hidden}
.card-spot .banner{height:180px; position:relative; overflow:hidden}
.card-spot .banner img{width:100%; height:100%; object-fit:cover; transition: transform .35s ease, filter .35s ease, opacity .35s ease; transform-origin:center center}
.card-spot:hover .banner img, .card-spot:focus-within .banner img{ transform: scale(1.06); filter:saturate(1.08); opacity:.95 }
.card-spot .banner .overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))}
.card-spot .fav-yes{ background:var(--brand); color:#081016; border-color:var(--brand) }
.card-spot .fav-yes .bi{ font-weight:700 }
.lang-switch .btn{ min-width:44px }
.lang-switch .btn.active, .lang-switch .btn:focus{ background:var(--brand); border-color:var(--brand); color:#081016 }
#total{ min-width:120px; text-align:right }
.hero{ position:relative; }
.hero .carousel-item{ height:22vh; min-height:140px; }
.hero img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65) 60%, rgba(0,0,0,.85)); }
.hero .caption{ position:absolute; left:0; right:0; bottom:1rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.hero .caption .lead{ color:#c9d2da }
@media (max-width: 768px){ .hero .carousel-item{ height:18vh; } }
.bottom-bar{ position:fixed; left:0; right:0; bottom:0; z-index:1045;
  background:rgba(12,15,20,.95); border-top:1px solid var(--card-bd); backdrop-filter:blur(6px); }
[data-bs-theme="light"] .bottom-bar{ background:rgba(255,255,255,.92); }
.bottom-bar .container-xxl{ padding-bottom: max(env(safe-area-inset-bottom), .25rem); }
