/* ================================================================
   BMG Catalog v3 — aurora / glass / editorial cards
   ================================================================ */
:root {
  --bg-0: #f5f5f7; --bg-1: rgba(255,255,255,.72); --bg-2: rgba(0,0,0,.04); --bg-3: rgba(0,0,0,.07);
  --solid: #ffffff;
  --ink: #0b0b0f; --ink-2: #4e4e58; --muted: #8e8e98;
  --border: rgba(0,0,0,.08); --border-2: rgba(0,0,0,.14);
  --a1: #ff6a3d; --a2: #c84bff; --a3: #4f7bff;
  --grad: linear-gradient(100deg, var(--a1), var(--a2) 50%, var(--a3));
  --glass: blur(22px) saturate(170%);
  --font: 'Geist', 'Inter', system-ui, sans-serif;
  --display: 'Unbounded', 'Geist', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] {
  --bg-0: #060608; --bg-1: rgba(22,22,28,.62); --bg-2: rgba(255,255,255,.05); --bg-3: rgba(255,255,255,.09);
  --solid: #111116;
  --ink: #f6f6f8; --ink-2: #a9a9b6; --muted: #6c6c78;
  --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.16);
}

html, body { background: var(--bg-0) !important; }
body, button, input, select, textarea { font-family: var(--font) !important; }
body { -webkit-font-smoothing: antialiased; letter-spacing: -.006em; position: relative; }
::selection { background: var(--a2); color: #fff; }
main.container { position: relative; }
/* when the photo viewer / modals are open, the floating topbar must not cover them */
body:has(.viewer:not(.hidden)) .topbar, body:has(.modal:not(.hidden)) .topbar { z-index: 0 !important; visibility: hidden; }

/* ---------- Aurora background + grain ---------- */
.v3-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.v3-aurora i {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(90px); opacity: .32; mix-blend-mode: screen; animation: v3float 26s var(--ease) infinite alternate;
}
.v3-aurora i:nth-child(1) { background: var(--a2); top: -30vmax; left: -12vmax; }
.v3-aurora i:nth-child(2) { background: var(--a1); top: -34vmax; right: -20vmax; animation-delay: -8s; opacity: .22; }
.v3-aurora i:nth-child(3) { background: var(--a3); bottom: -40vmax; left: 25vw; animation-delay: -16s; opacity: .18; }
:root:not([data-theme="dark"]) .v3-aurora i { mix-blend-mode: multiply; opacity: .16; }
@keyframes v3float { to { transform: translate3d(6vw, 8vh, 0) scale(1.15); } }
.v3-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Floating glass topbar ---------- */
.topbar {
  position: sticky !important; top: 12px; z-index: 60; height: 60px !important;
  margin: 12px auto 0; width: min(1240px, calc(100% - 24px)); border-radius: 18px;
  background: var(--bg-1) !important; backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--border) !important; box-shadow: 0 10px 40px -12px rgba(0,0,0,.35);
  padding: 0 10px 0 12px !important;
}
.brand-mark {
  background: var(--grad) !important; color: #fff !important; border-radius: 11px !important;
  width: 36px !important; height: 36px !important; box-shadow: 0 6px 20px -4px rgba(200,75,255,.6);
}
.brand-title { font-family: var(--display) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
.brand-sub { font-family: var(--mono) !important; font-size: 10px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted) !important; }
.theme-toggle, .lang-toggle {
  border-radius: 12px !important; border: 1px solid var(--border) !important; background: var(--bg-2) !important; color: var(--ink-2) !important;
  transition: all .2s var(--ease) !important;
}
.theme-toggle:hover, .lang-toggle:hover { color: var(--ink) !important; background: var(--bg-3) !important; transform: translateY(-1px); }

/* ---------- Hero ---------- */
.v3-hero { text-align: center; padding: 56px 8px 28px; animation: v3up .9s var(--ease) both; }
.v3-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--border); backdrop-filter: var(--glass);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.v3-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: v3ping 2s infinite; }
@keyframes v3ping { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.v3-h1 {
  font-family: var(--display); font-weight: 600; font-size: clamp(32px, 6.4vw, 78px);
  line-height: 1.02; letter-spacing: -.045em; margin: 22px auto 18px; color: var(--ink); max-width: 1000px;
}
.v3-h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: v3shine 8s linear infinite; }
@keyframes v3shine { to { background-position: 200% center; } }
.v3-lead { max-width: 560px; margin: 0 auto; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.v3-stats { display: inline-flex; margin-top: 30px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-1); backdrop-filter: var(--glass); overflow: hidden; }
.v3-stats div { padding: 14px 26px; display: flex; flex-direction: column; gap: 2px; }
.v3-stats div + div { border-left: 1px solid var(--border); }
.v3-stats b { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.v3-stats span { font-size: 12px; color: var(--muted); }
@keyframes v3up { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* marquee */
.v3-marquee {
  margin: 22px -50vw 40px; padding: 16px 0; position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw;
  overflow: hidden; border-block: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.v3-marquee .track { display: inline-flex; gap: 28px; align-items: center; white-space: nowrap; animation: v3marq 60s linear infinite; }
.v3-marquee span { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--ink-2); }
.v3-marquee i { font-style: normal; color: var(--a2); font-size: 14px; }
@keyframes v3marq { to { transform: translateX(-50%); } }

/* ---------- Bento panels (welcome) ---------- */
.welcome-page { gap: 16px !important; }
.w-panel, .filter-card {
  background: var(--bg-1) !important; backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--border) !important; border-radius: 26px !important; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35) !important;
}
.w-panel-head { border-bottom: 1px solid var(--border) !important; padding: 20px 22px 16px !important; }
.w-panel-head h2 {
  font-family: var(--display) !important; font-size: 16px !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: -.02em !important; color: var(--ink) !important;
}
.site-grid { gap: 10px !important; }
.site-card {
  position: relative; border-radius: 16px !important; border: 1px solid var(--border) !important; background: var(--bg-2) !important;
  transition: transform .25s var(--ease), background .25s, border-color .25s !important; overflow: hidden;
}
.site-card:hover { transform: translateY(-2px); background: var(--bg-3) !important; border-color: var(--border-2) !important; }
.site-ico {
  background: var(--solid) !important; border: 1px solid var(--border) !important; color: var(--ink) !important;
  border-radius: 10px !important; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important;
}
.site-name { font-weight: 500 !important; }
.site-card[aria-pressed="true"] { border-color: transparent !important; background: var(--solid) !important;
  box-shadow: 0 0 0 1.5px var(--a2), 0 10px 30px -10px rgba(200,75,255,.55) !important; }
.site-card[aria-pressed="true"] .site-ico { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
.w-footer { background: transparent !important; border-top: 1px solid var(--border) !important; }
.btn-go {
  position: relative; background: var(--ink) !important; color: var(--bg-0) !important; border: 0 !important;
  border-radius: 14px !important; font-weight: 600 !important; font-size: 14px !important; padding: 0 26px !important;
  box-shadow: none !important; transition: transform .2s var(--ease), box-shadow .3s !important;
}
.btn-go:not(:disabled) { background: var(--grad) !important; color: #fff !important; box-shadow: 0 12px 30px -8px rgba(200,75,255,.65) !important; }
.btn-go:not(:disabled):hover { transform: translateY(-2px) scale(1.02); }
.btn-go:disabled { opacity: .3 !important; }
.info-icon { background: var(--bg-2) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.info-link { color: var(--ink) !important; }

/* ---------- Filter bar: floating glass ---------- */
.filter-card { position: sticky; top: 84px; z-index: 40; margin-top: 18px; padding: 14px 16px !important; }
.filter-card label, .field > label {
  color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important;
}
.control, .filter-card select, .ms-toggle {
  background: var(--bg-2) !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
  color: var(--ink) !important; font-weight: 500 !important; transition: background .2s, border-color .2s !important;
}
.control option { background: var(--solid); color: var(--ink); }
.control:hover, .ms-toggle:hover { background: var(--bg-3) !important; }
.control:focus, .ms-toggle:focus { border-color: var(--a2) !important; box-shadow: 0 0 0 4px rgba(200,75,255,.18) !important; outline: none; }
.ms-panel { background: var(--solid) !important; border-radius: 16px !important; }
.btn-fav-open {
  border-radius: 12px !important; border: 0 !important; background: var(--ink) !important; color: var(--bg-0) !important; font-weight: 600 !important;
  transition: transform .2s var(--ease) !important;
}
.btn-fav-open:hover { transform: translateY(-1px); }
.badge-count { background: var(--grad) !important; color: #fff !important; font-family: var(--mono); }

/* ---------- Editorial cards: info overlaid on photo ---------- */
#grid { gap: 18px !important; margin-top: 22px; }
@media (min-width: 1100px) { #grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
.card {
  display: grid !important; grid-template-columns: 1fr; grid-template-rows: 1fr;
  position: relative; border: 0 !important; border-radius: 24px !important; overflow: hidden !important;
  background: var(--solid) !important; box-shadow: 0 1px 0 var(--border) !important; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease) !important;
  animation: v3up .7s var(--ease) both;
}
#grid .card:nth-child(4n+2) { animation-delay: .06s; } #grid .card:nth-child(4n+3) { animation-delay: .12s; } #grid .card:nth-child(4n+4) { animation-delay: .18s; }
.card:hover { transform: translateY(-6px) !important; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px var(--border-2) !important; }
.card > * { grid-area: 1 / 1; }
.thumbbox { margin: 0 !important; border-radius: 0 !important; aspect-ratio: 3 / 4.2 !important; }
.thumbbox::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 22%, transparent 48%, rgba(0,0,0,.85) 100%);
}
.thumb { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; transition: transform 1.2s var(--ease) !important; }
.card:hover .thumb { transform: scale(1.06) !important; }

.meta { align-self: end; z-index: 2; padding: 16px 16px 14px !important; color: #fff; pointer-events: none; }
.meta a { pointer-events: auto; }
.c-name { font-family: var(--display) !important; font-size: 19px !important; font-weight: 500 !important; letter-spacing: -.035em !important; color: #fff !important; line-height: 1.15 !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.c-name .fi { border-radius: 3px; width: 1.05em !important; }
.c-info-row { color: rgba(255,255,255,.92) !important; font-size: 12.5px !important; margin-top: 4px; }
.c-label { color: rgba(255,255,255,.6) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 400 !important; }
.c-note { color: rgba(255,255,255,.8) !important; font-size: 12.5px !important; }
.c-footer { color: rgba(255,255,255,.6) !important; font-family: var(--mono); font-size: 11.5px !important; margin-top: 8px; }
.c-footer .link { color: #fff !important; text-decoration: none !important; font-family: var(--font); border-bottom: 1px solid rgba(255,255,255,.35); }

.badge, .perevod-badge--card {
  z-index: 3; top: 12px !important; bottom: auto !important; left: 12px !important; right: auto !important;
  background: rgba(255,255,255,.16) !important; color: #fff !important; backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22) !important; border-radius: 999px !important;
  font-family: var(--mono) !important; font-size: 11px !important; padding: 4px 9px !important;
}
.perevod-badge--card { left: auto !important; right: 12px !important; background: var(--grad) !important; border: 0 !important; font-family: var(--font) !important; font-weight: 600 !important; }

/* actions: vertical glass dock, top-right, reveal on hover */
.card-actions {
  align-self: start; justify-self: end; z-index: 3; margin: 10px !important;
  flex-direction: column; gap: 6px !important; padding: 5px !important; border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 16px; background: rgba(15,15,20,.32) !important; backdrop-filter: blur(16px) saturate(160%);
  opacity: 0; transform: translateX(8px); transition: opacity .3s var(--ease), transform .3s var(--ease) !important;
}
.card:has(.perevod-badge--card) .card-actions { margin-top: 44px !important; }
.card:hover .card-actions, .card:focus-within .card-actions { opacity: 1; transform: none; }
.card-actions .flex-spacer { display: none; }
.btn-card { width: 34px !important; height: 34px !important; border-radius: 11px !important; border: 0 !important; background: transparent !important; color: #fff !important; }
.btn-card:hover { background: rgba(255,255,255,.18) !important; }
.btn-fav.active { background: var(--grad) !important; color: #fff !important; }
.card:has(.btn-fav.active) .card-actions { opacity: 1; transform: none; }
@media (hover: none) { .card-actions { opacity: 1; transform: none; } }

/* ---------- Modals ---------- */
.modal-dialog, .fav-dialog, .lang-dialog, .chb-card {
  background: var(--solid) !important; border-radius: 26px !important; border: 1px solid var(--border) !important;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.6) !important;
}
.modal-title, .fav-title, .lang-modal-title, .chb-title { font-family: var(--display) !important; font-weight: 500 !important; letter-spacing: -.03em !important; }
.chb-btn-primary { background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; }
.chb-btn-ghost { border-radius: 14px !important; }

/* ---------- Footer ---------- */
.v2-foot { margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; font-family: var(--mono); display: flex; justify-content: space-between; position: relative; z-index: 1; }

@media (max-width: 640px) {
  .topbar { top: 8px; margin-top: 8px; height: 54px !important; border-radius: 16px; }
  .brand-sub { display: none; }
  .v3-hero { padding: 34px 0 10px; }
  .v3-stats div { padding: 10px 14px; }
  .v3-stats b { font-size: 17px; }
  .v3-marquee span { font-size: 17px; }
  .filter-card { position: relative; top: 0; }
  #grid { gap: 10px !important; }
  .card { border-radius: 18px !important; }
  .c-name { font-size: 15px !important; }
  .meta { padding: 10px 10px 10px !important; }
  .c-info-row, .c-note { font-size: 11.5px !important; }
  .card-actions { margin: 6px !important; padding: 3px !important; border-radius: 13px; }
  .btn-card { width: 30px !important; height: 30px !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* card-action tooltips: glass pill to the left of the dock (not clipped, no native title) */
.card .card-actions .btn-card.icon-only[data-label]::after,
.card .card-actions .btn-card.icon-only[data-label]:first-child::after {
  left: auto !important; right: calc(100% + 12px) !important; top: 50% !important; bottom: auto !important;
  transform: translate(6px, -50%) !important;
  background: rgba(12,12,16,.78) !important; color: #fff !important;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px !important;
  padding: 6px 10px !important; font: 500 12px/1.2 var(--font) !important; letter-spacing: -.005em;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.5);
  transition: opacity .18s var(--ease), transform .18s var(--ease) !important;
}
.card .card-actions .btn-card.icon-only[data-label]:hover::after,
.card .card-actions .btn-card.icon-only[data-label]:first-child:hover::after {
  opacity: 1 !important; transform: translate(0, -50%) !important;
}

/* no double-tap zoom on phones */
html, body { touch-action: pan-x pan-y; }

/* ---------- mobile: collapsible action menu (chevron) ---------- */
.v3-more { display: none; }
@media (hover: none), (max-width: 640px) {
  .card-actions { opacity: 1 !important; transform: none !important; transition: background .25s var(--ease) !important; }
  .v3-more {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 11px;
    background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .v3-more svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
  .card-actions.open .v3-more svg { transform: rotate(180deg); }
  .card-actions .btn-card {
    max-height: 0; opacity: 0; margin: -3px 0 !important; overflow: hidden; pointer-events: none;
    transform: translateY(-6px) scale(.85);
    transition: max-height .3s var(--ease), opacity .2s var(--ease), transform .3s var(--ease), margin .3s var(--ease) !important;
  }
  .card-actions.open .btn-card { max-height: 40px; opacity: 1; margin: 0 !important; pointer-events: auto; transform: none; }
  .card-actions.open .btn-card:nth-of-type(2) { transition-delay: .03s !important; }
  .card-actions.open .btn-card:nth-of-type(3) { transition-delay: .06s !important; }
  .card-actions.open .btn-card:nth-of-type(4) { transition-delay: .09s !important; }
  .card-actions:not(.open) { background: rgba(15,15,20,.38) !important; }
  /* favourite stays visible when active, as a small gold hint */
  .card-actions:not(.open) .btn-fav.active { max-height: 40px; opacity: 1; margin: 0 !important; pointer-events: auto; transform: none; }
  .btn-card.icon-only[data-label]::after { display: none !important; }
}

/* ---------- mobile tweaks: smaller chevron, tighter meta ---------- */
@media (hover: none), (max-width: 640px) {
  .card-actions { margin: 6px !important; padding: 2px !important; border-radius: 10px !important; }
  .v3-more { width: 26px; height: 26px; border-radius: 8px; }
  .v3-more svg { width: 14px; height: 14px; }
  .card-actions .btn-card { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
  .meta { padding: 8px 10px 8px !important; }
  .meta .c-name { margin-bottom: 1px !important; line-height: 1.1 !important; }
  .meta .c-info-row, .meta .c-note { margin-top: 1px !important; line-height: 1.3 !important; }
  .meta .c-footer { margin-top: 2px !important; padding-top: 0 !important; line-height: 1.3 !important; }
  .meta .c-info-row { margin-bottom: 0 !important; padding: 0 !important; }
}