/* ChessDB.cz – nový vzhled v2 (beta) · sdílené tokeny a komponenty (search.php, profil.php)
   Návrh: Claude Design „ChessDB Vyhledavani v2". Načítá se jen když je nový vzhled aktivní (html.cdb-v2). */

html.cdb-v2 {
  --v2-bg: #0F172A; --v2-card: #1E293B; --v2-card2: #16202F; --v2-navy: #111927;
  --v2-acc: #F2D23C; --v2-acc-h: #FFE066; --v2-on: #111927;
  --v2-t: #E2E8F0; --v2-t2: #CBD5E1; --v2-m: #94A3B8; --v2-m2: #64748B;
  --v2-win: #4ADE80; --v2-loss: #F87171; --v2-warn: #FBBF24;
  --v2-b: rgba(255,255,255,.07); --v2-b2: rgba(255,255,255,.09);
  --v2-seg: #172033; --v2-off: #334155;
  --v2-pop: 'Poppins', 'Noto Sans Symbols 2', 'Manrope', sans-serif; --v2-man: 'Manrope', 'Noto Sans Symbols 2', sans-serif;
  background: var(--v2-bg);
  scrollbar-color: #334155 var(--v2-bg);
}
html.cdb-v2 body { margin: 0; background: var(--v2-bg) !important; color: var(--v2-t); font-family: var(--v2-man); -webkit-font-smoothing: antialiased; }   /* bez resetu šablony měly Články, Série a Kvízy okraj 8 px */
html.cdb-v2::-webkit-scrollbar { width: 12px; }
html.cdb-v2::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; border: 3px solid var(--v2-bg); }
html.cdb-v2::-webkit-scrollbar-track { background: var(--v2-bg); }
html.cdb-v2 ::selection { background: rgba(242,210,60,.35); color: #fff; }
html.cdb-v2 :focus-visible { outline: 2px solid var(--v2-acc); outline-offset: 2px; }

/* ── Ikony (Lucide sprite) ── */
.v2i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: middle; }

/* ── Hlavička ── */
.v2-header { position: sticky; top: 0; z-index: 70; height: 72px; background: rgba(17,25,39,.96); border-bottom: 1px solid var(--v2-b); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.v2-header__in { max-width: 1248px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 40px; padding: 0 24px; box-sizing: border-box; }
.v2-logo { display: flex; align-items: center; flex: none; }
.v2-logo img { height: 32px; width: auto; display: block; }
.v2-nav { display: flex; gap: 6px; }
.v2-nav a { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; color: var(--v2-t2); font: 700 14px var(--v2-man); text-decoration: none; transition: color .14s ease, background .14s ease; white-space: nowrap; }
.v2-nav a:hover { color: var(--v2-acc); background: rgba(255,255,255,.05); }
.v2-nav a.is-on { color: var(--v2-acc); background: rgba(242,210,60,.1); }   /* aktivní stránka (cdb_v2_header active) */
.v2-login { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font: 800 14px var(--v2-man); color: var(--v2-t) !important; text-decoration: none !important; white-space: nowrap; transition: color .14s ease, border-color .14s ease; }   /* nepřihlášený místo avataru */
.v2-login .v2i { font-size: 16px; }
.v2-login:hover { color: var(--v2-acc) !important; border-color: rgba(242,210,60,.45); }
.v2-nav a .v2i { font-size: 17px; }
.v2-hright { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Sklo (Liquid Glass) + kruhová tlačítka ── */
.v2-glass { background: rgba(30,41,59,.55); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); color: var(--v2-t); }
.v2-circ { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: color .14s ease, border-color .14s ease; flex: none; padding: 0; }
.v2-circ:hover { color: var(--v2-acc); border-color: rgba(242,210,60,.45); }
.v2-bell__badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--v2-loss); color: var(--v2-on); font: 800 10px var(--v2-man); display: flex; align-items: center; justify-content: center; }
.v2-bell__badge.hidden { display: none; }
.v2-avatar-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--v2-acc); color: var(--v2-on) !important; font: 600 16px var(--v2-pop); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: box-shadow .14s ease; }
.v2-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(242,210,60,.25); }

/* ── Patička ── */
.v2-footer { background: var(--v2-navy); border-top: 1px solid var(--v2-b); }
.v2-footer__in { max-width: 1248px; margin: 0 auto; padding: 40px 24px; box-sizing: border-box; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font: 500 13px/1.6 var(--v2-man); color: var(--v2-m); }
.v2-footer a { color: var(--v2-t2); text-decoration: none; }
.v2-footer a:hover { color: var(--v2-acc); }
.v2-footer__h { color: var(--v2-t2); font-weight: 700; }
.v2-footer .v2-u { text-decoration: underline; }
.v2-footer__soc { margin-top: 12px; display: flex; gap: 14px; }
.v2-footer__col { display: flex; flex-direction: column; gap: 6px; }
.v2-footer__col--r { align-items: flex-end; text-align: right; }

/* ── Tlačítka ── */
.v2-btn { height: 48px; padding: 0 20px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 800 14px var(--v2-man); cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .14s ease, background .14s ease; box-sizing: border-box; }
.v2-btn .v2i { font-size: 16px; }
.v2-btn--pri { background: var(--v2-acc); color: var(--v2-on) !important; border: 0; box-shadow: 0 6px 14px rgba(242,210,60,.28); font-size: 16px; }
.v2-btn--pri:hover { background: var(--v2-acc-h); }
.v2-btn--pri:active { transform: scale(.98); box-shadow: 0 6px 14px rgba(242,210,60,.1); }
.v2-btn--sec { background: var(--v2-card); border: 1px solid var(--v2-b2); color: var(--v2-t) !important; }
.v2-btn--sec:hover { border-color: rgba(242,210,60,.45); }
.v2-btn--xl { height: 56px; }
.v2-cap { border-radius: 999px; }
.v2-pill { height: 38px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--v2-man); cursor: pointer; text-decoration: none; white-space: nowrap; }
.v2-pill .v2i { font-size: 16px; }

/* ── AI prvky: gradient kouče ── */
.v2-ai { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 999px; color: var(--v2-on) !important; font: 800 12px var(--v2-man); border: 1px solid rgba(255,255,255,.3); text-decoration: none; cursor: pointer; white-space: nowrap; background: none; }
/* Safari neořízne rozmazanou vrstvu přes overflow:hidden + border-radius rodiče (ostré rohy) – ořez proto přímo na vrstvě:
   inset -40 % → tlačítko je 22,2222 % od okraje vrstvy, -30 % → 18,75 %. Stín tlačítka zůstává, lesk (::after) má vlastní zaoblení. */
.v2-ai::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 200deg, #F2D23C, #FFA440, #FFF0BE, #6078B4, #F2D23C); filter: blur(10px); z-index: -2; -webkit-clip-path: inset(22.2222% round 999px); clip-path: inset(22.2222% round 999px); }
.v2-ai::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0) 50%); z-index: -1; }
.v2-ai .v2i { font-size: 13px; }
.v2-ai--lg { height: 38px; padding: 0 18px; gap: 8px; font-size: 14px; box-shadow: 0 6px 18px rgba(255,164,64,.32); }
.v2-ai--lg::before { inset: -30%; filter: blur(14px); -webkit-clip-path: inset(18.75% round 999px); clip-path: inset(18.75% round 999px); }
.v2-ai--lg .v2i { font-size: 16px; }
.v2-ai:hover { filter: brightness(1.04); }

/* ── Segmenty, štítky, karty ── */
.v2-seg { display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); box-sizing: border-box; }
.v2-seg button { flex: 1; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--v2-t2); font: 700 13px var(--v2-man); cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.v2-seg button.is-on { background: var(--v2-acc); color: var(--v2-on); box-shadow: 0 0 12px rgba(242,210,60,.18); }
.v2-label { font: 800 12px var(--v2-man); letter-spacing: 1.2px; color: var(--v2-m); text-transform: uppercase; }
.v2-card { background: var(--v2-card); border: 1px solid var(--v2-b); border-radius: 18px; }
.v2-tagchip { height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(242,210,60,.12); color: var(--v2-acc); font: 800 12px var(--v2-man); letter-spacing: 1.2px; display: inline-flex; align-items: center; gap: 6px; }
.v2-tagchip .v2i { font-size: 14px; }
.v2-h2 { margin: 0; font: 600 18px var(--v2-pop); letter-spacing: -.01em; color: var(--v2-t); }
.v2-two { font-family: var(--v2-pop); font-weight: 300; letter-spacing: -.02em; color: var(--v2-t); }
.v2-two b, .v2-two strong { font-weight: 600; color: var(--v2-acc); }
.v2-note { border-radius: 12px; background: rgba(242,210,60,.1); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; font: 600 12.5px/1.5 var(--v2-man); color: var(--v2-t); }
.v2-note .v2i { color: var(--v2-acc); font-size: 15px; margin-top: 1px; }
.v2-note--err { background: rgba(248,113,113,.12); }
.v2-note--err .v2i { color: var(--v2-loss); }

/* ── Popup „nový vzhled" ── */
.v2-pop-backdrop { position: fixed; inset: 0; z-index: 30000; background: rgba(15,23,42,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.v2-pop { position: relative; width: 480px; max-width: 100%; background: var(--v2-card); border: 1px solid var(--v2-b); border-radius: 18px; padding: 28px; box-sizing: border-box; color: var(--v2-t); font-family: var(--v2-man); }
.v2-pop__x { position: absolute; top: 18px; right: 18px; }
.v2-pop__h { margin: 14px 0 0; font: 300 28px/1.2 var(--v2-pop); letter-spacing: -.02em; color: var(--v2-t); }
.v2-pop__h b { font-weight: 600; color: var(--v2-acc); }
.v2-pop__p { margin: 10px 0 0; font: 500 15px/1.55 var(--v2-man); color: var(--v2-t2); }
.v2-pop__btns { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.v2-pop__btns .v2-btn { width: 100%; }