:root {
  --bg: #070b2e;
  --bg2: #0b0f3d;
  --surface: rgba(24, 30, 92, .55);
  --surface-solid: #131a55;
  --line: rgba(120, 140, 255, .22);
  --text: #f2f3ff;
  --dim: #a9a8d8;
  --cyan: #3fb8ff;
  --blue: #2e7bff;
  --purple: #9b5cff;
  --violet: #b48cff;
  --online: #2ee07a;
  --fav: #e85d04;
  --msg: #12b8ff;
  --danger: #ff5c7a;
  --brand: linear-gradient(90deg, var(--cyan), var(--purple));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 76px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; }
body {
  font-family: "SF Pro Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* fixed + inset:0 drží aplikaci přesně ve viditelné ploše (i po obnovení PWA na Androidu) */
#app {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(120% 70% at 100% 100%, #1a0f4a 0%, transparent 60%), var(--bg);
}
.glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 45% at -5% -5%, rgba(46, 123, 255, .75) 0%, rgba(46, 123, 255, .18) 45%, transparent 75%);
}

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.logo-heart { width: 40px; height: 40px; stroke: url(#g-brand); stroke-width: 2.2; }
.brand-text {
  font-size: 30px; font-weight: 800; letter-spacing: -.5px;
  background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Views ---------- */
#main { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; }
.view.active { display: flex; }
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 14px) 18px 6px; position: relative; z-index: 2;
}
.top h1 { margin: 6px 0; font-size: 28px; font-weight: 800; }
.top-actions { display: flex; gap: 6px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.icon-btn svg { width: 28px; height: 28px; }
.icon-btn:active { background: rgba(255,255,255,.08); }

/* ---------- Segment ---------- */
.seg {
  position: relative; display: flex; margin: 4px 18px 6px; padding: 4px;
  background: rgba(10, 14, 60, .6); border: 1px solid var(--line); border-radius: 999px; z-index: 2;
}
.seg button { flex: 1; padding: 7px 0; font-size: 14px; font-weight: 600; color: var(--dim); position: relative; z-index: 1; transition: color .2s; }
.seg button.active { color: #fff; }
.seg-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(63,184,255,.35), rgba(155,92,255,.35));
  border: 1px solid rgba(140, 170, 255, .35);
  transition: transform .08s linear;
}
.auth-seg .active { background: linear-gradient(90deg, rgba(63,184,255,.35), rgba(155,92,255,.35)); border-radius: 999px; }

/* ---------- Pager (swipe vlevo/vpravo) ---------- */
.pager {
  flex: 1; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pager::-webkit-scrollbar { display: none; }
.page {
  flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior-y: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}
.page::-webkit-scrollbar { display: none; }
.scroll { flex: 1; overflow-y: auto; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 30px); }

/* ---------- Mozaika kruhů ---------- */
.honey { position: relative; width: 100%; }
.bubble {
  position: absolute; border-radius: 50%;
  transition: transform .15s ease;
  animation: pop .45s cubic-bezier(.2,.9,.3,1.2) both;
}
.bubble:active { transform: scale(.95); }
.bubble .ph {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 30, .55), 0 0 0 1.5px rgba(160, 180, 255, .18);
  background: var(--surface-solid);
}
.av.on .ph { box-shadow: 0 0 0 2.5px var(--online), 0 0 12px rgba(46, 224, 122, .45); }
.bubble img, .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble .label {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48%; z-index: 2;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(to top, rgba(5, 8, 40, .88) 10%, rgba(5, 8, 40, .45) 55%, transparent);
  display: flex; justify-content: center; align-items: flex-end; padding-bottom: 25%;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); pointer-events: none;
}
.bubble .label span { color: #d8dcff; font-size: 11.5px; font-weight: 600; }
/* Jméno + věk zaoblené podél spodní hrany fotky */
.bubble .arc-text {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible;
  stroke: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.bubble .arc-text text { fill: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; }
.dot {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: var(--online); border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(46,224,122,.7);
}
.bubble .dot { width: 17px; height: 17px; border-width: 2.5px; right: 14.6%; bottom: 14.6%; transform: translate(50%, 50%); }
.bubble .heart-badge {
  position: absolute; left: 12%; top: 10%; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(10,14,60,.75);
}
.bubble .heart-badge svg { width: 15px; height: 15px; fill: #ff5c9a; stroke: none; }
.initials {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; background: linear-gradient(135deg, #2e7bff, #9b5cff);
}
.empty {
  text-align: center; color: var(--dim); padding: 70px 34px; font-size: 15px; line-height: 1.5;
}
.empty svg { width: 54px; height: 54px; stroke: url(#g-brand); display: block; margin: 0 auto 14px; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ---------- Tabbar ---------- */
.tabbar {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 10px);
  height: var(--tabbar-h); display: flex; align-items: center; justify-content: space-around; z-index: 20;
  border-radius: 38px; border: 1px solid rgba(110, 130, 255, .45);
  background: linear-gradient(180deg, rgba(22, 30, 100, .72), rgba(12, 14, 60, .82));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0, 0, 20, .6), inset 0 1px 0 rgba(255,255,255,.08);
}
.tabbar button {
  position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--violet); font-size: 13px; font-weight: 600;
}
.tabbar svg { width: 30px; height: 30px; stroke-width: 1.7; }
.tabbar button.active { color: var(--cyan); }
.tabbar button.active svg { fill: var(--cyan); stroke: var(--cyan); }
.tabbar button[data-tab="chats"].active svg { fill: none; }
.badge {
  position: absolute; top: 10px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}

/* ---------- Formuláře ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--dim); font-weight: 600; }
.card label + label { margin-top: 12px; }
.form small { font-weight: 400; }
.form output { color: var(--text); float: right; }
.form label:has(output) { display: block; }
.form label:has(output) input { display: block; width: 100%; margin-top: 8px; }
.form input:not([type=range]):not([type=checkbox]), .form textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(5, 8, 40, .55); font-size: 16px; outline: none; resize: vertical;
}
.form input:focus, .form textarea:focus { border-color: var(--cyan); }
input[type=range] { accent-color: var(--cyan); height: 26px; }
.form-error { color: var(--danger); min-height: 1em; margin: 0; font-size: 14px; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  box-shadow: 0 8px 24px rgba(80, 90, 255, .4);
}
.btn-primary:active { filter: brightness(1.15); }
.btn-primary:disabled { opacity: .6; }
.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-weight: 600;
}
.btn-ghost + .btn-ghost { margin-top: 10px; }
.btn-ghost svg { width: 20px; height: 20px; }
.btn-ghost.danger { color: var(--danger); border-color: rgba(255, 92, 122, .4); }
.muted { color: var(--dim); font-size: 14px; margin: 0 0 12px; }
.switch { flex-direction: row !important; align-items: center; gap: 12px !important; color: var(--text) !important; font-size: 15px !important; }
.switch input { display: none; }
.switch span { width: 48px; height: 28px; border-radius: 14px; background: rgba(255,255,255,.15); position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--online); }
.switch input:checked + span::after { transform: translateX(20px); }

/* ---------- Auth ---------- */
.auth {
  position: absolute; inset: 0; overflow-y: auto; z-index: 5;
  padding: calc(var(--safe-top) + 12vh) 22px 40px; display: flex; flex-direction: column;
}
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.auth-logo .logo-heart { width: 56px; height: 56px; }
.auth-logo .brand-text { font-size: 44px; }
.auth-sub { text-align: center; color: var(--dim); margin: 8px 0 28px; }
.auth .seg { margin: 0 0 16px; }
.auth .seg button { padding: 10px 0; }

/* ---------- Profil ---------- */
.profile-form { padding: 6px 18px 0; }
.profile-form h2 { font-size: 15px; color: var(--dim); margin: 10px 4px -4px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.avatar-edit { display: flex; justify-content: center; padding: 6px 0; }
.avatar-big {
  position: relative; width: 140px; height: 140px; border-radius: 50%; cursor: pointer;
  padding: 3px; background: var(--brand) !important;
}
.avatar-big .ph { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); }
.avatar-cam {
  position: absolute; right: 2px; bottom: 6px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); border: 3px solid var(--bg); color: #fff;
}
.avatar-cam svg { width: 20px; height: 20px; }

/* ---------- Seznam chatů ---------- */
.chat-list { list-style: none; margin: 0; padding: 6px 12px; }
.chat-list li { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 18px; cursor: pointer; }
.chat-list li:active { background: rgba(255,255,255,.06); }
.av { position: relative; width: 62px; height: 62px; flex: none; }
.av .ph { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(160,180,255,.25); }
.av .initials { font-size: 22px; }
.av .dot { width: 16px; height: 16px; right: -1px; bottom: 1px; border-width: 2.5px; }
.cl-main { flex: 1; min-width: 0; }
.cl-top { display: flex; justify-content: space-between; gap: 8px; }
.cl-top b { font-size: 16px; }
.cl-top time { color: var(--dim); font-size: 12px; flex: none; }
.cl-last { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.unread .cl-last { color: var(--text); font-weight: 600; }
.cl-badge { background: var(--cyan); color: #04102e; font-size: 12px; font-weight: 800; border-radius: 10px; padding: 1px 7px; }

/* ---------- Overlay: detail profilu ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column;
  animation: slideIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
.pd-scroll { flex: 1; overflow-y: auto; position: relative; }
.pd-photo { width: 100%; aspect-ratio: 4 / 5; max-height: 70vh; position: relative; background: var(--surface-solid); }
.pd-photo img, .pd-photo .initials { width: 100%; height: 100%; object-fit: cover; font-size: 90px; }
.pd-photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, var(--bg), transparent); }
.pd-back { position: absolute; top: calc(var(--safe-top) + 10px); left: 10px; background: rgba(5,8,40,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pd-body { padding: 0 22px 24px; margin-top: -70px; position: relative; }
.pd-body h2 { font-size: 32px; margin: 0; font-weight: 800; }
.pd-meta { display: flex; align-items: center; gap: 10px; color: var(--dim); margin: 6px 0 16px; flex-wrap: wrap; }
.pd-meta svg { width: 18px; height: 18px; }
.pd-meta .on { color: var(--online); font-weight: 600; }
.pd-bio { font-size: 16px; line-height: 1.55; margin: 0 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 7px 13px; border-radius: 999px; font-size: 14px; border: 1px solid var(--line); background: var(--surface); }
.pd-actions {
  display: flex; gap: 12px; padding: 12px 18px calc(var(--safe-bottom) + 14px);
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.pd-actions .btn-primary { flex: 1; }
.round-btn {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); background: var(--surface);
}
.round-btn svg { width: 26px; height: 26px; }
#pd-like.on { background: rgba(255, 92, 154, .18); border-color: #ff5c9a; color: #ff5c9a; }
#pd-like.on svg { fill: #ff5c9a; }
#pd-like.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.25); } }

/* ---------- Chat ---------- */
.chat-head {
  display: flex; align-items: center; gap: 6px; padding: calc(var(--safe-top) + 8px) 10px 10px;
  border-bottom: 1px solid var(--line); background: rgba(10,14,60,.6);
}
.chat-who { display: flex; align-items: center; gap: 12px; text-align: left; }
.chat-who .av { width: 42px; height: 42px; }
.chat-who .av .dot { width: 12px; height: 12px; border-width: 2px; }
.chat-who small { display: block; color: var(--dim); font-size: 12px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 20px; font-size: 15.5px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
.msg.them { align-self: flex-start; background: var(--surface-solid); border-bottom-left-radius: 6px; }
.msg.mine { align-self: flex-end; background: linear-gradient(135deg, var(--blue), var(--purple)); border-bottom-right-radius: 6px; }
.msg-day { align-self: center; color: var(--dim); font-size: 12px; margin: 10px 0 4px; }
.chat-input { display: flex; gap: 10px; padding: 10px 12px calc(var(--safe-bottom) + 10px); border-top: 1px solid var(--line); }
.chat-input input {
  flex: 1; min-width: 0; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(5,8,40,.6); font-size: 16px; outline: none;
}
.round-btn.send { background: linear-gradient(135deg, var(--blue), var(--purple)); border: 0; width: 48px; height: 48px; }
.round-btn.send svg { width: 22px; height: 22px; }

/* ---------- Bottom sheet ---------- */
.sheet-wrap { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 15, .55); display: flex; align-items: flex-end; animation: fade .2s; }
.sheet {
  width: 100%; padding: 10px 20px calc(var(--safe-bottom) + 24px);
  background: #10164c; border-radius: 28px 28px 0 0; border-top: 1px solid var(--line);
  animation: up .25s cubic-bezier(.2,.8,.2,1);
}
.sheet h2 { margin: 6px 0 16px; font-size: 22px; }
.sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); margin: 0 auto; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 16px); transform: translateX(-50%); z-index: 1000;
  background: rgba(20, 26, 90, .95); border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: fade .2s; max-width: 90%; text-align: center;
}

/* ---------- Potažením obnovit ---------- */
.ptr {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 112px); z-index: 30;
  width: 40px; height: 40px; margin-top: -40px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  background: #151c5c; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.5);
  transform: translate(-50%, 0); transition: transform .25s, opacity .25s;
}
.ptr.dragging { transition: none; }
.ptr svg { width: 22px; height: 22px; stroke: var(--dim); }
.ptr.ready svg { stroke: var(--cyan); }
.ptr.spin svg { stroke: var(--cyan); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Barevný segment Chaty / Okolí / Oblíbené (legenda k okrajům) ---------- */
#seg-discover button[data-page="0"] { color: rgba(18, 184, 255, .7); }
#seg-discover button[data-page="1"] { color: rgba(46, 224, 122, .7); }
#seg-discover button[data-page="2"] { color: rgba(232, 93, 4, .85); }
#seg-discover button.active[data-page="0"] { color: #7fd8ff; }
#seg-discover button.active[data-page="1"] { color: #8ff0b6; }
#seg-discover button.active[data-page="2"] { color: #ffa45c; }
#seg-discover .seg-ind { transition: transform .08s linear, background .25s, border-color .25s; }
#seg-discover[data-active="0"] .seg-ind { background: rgba(18, 184, 255, .22); border-color: rgba(18, 184, 255, .75); }
#seg-discover[data-active="1"] .seg-ind { background: rgba(46, 224, 122, .2); border-color: rgba(46, 224, 122, .7); }
#seg-discover[data-active="2"] .seg-ind { background: rgba(232, 93, 4, .22); border-color: rgba(232, 93, 4, .8); }

/* Barevný proužek kolem kruhu (může být rozdělený na 2–3 díly) */
.bubble .ring {
  position: absolute; inset: -5px; border-radius: 50%; z-index: 0; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .12));
}
.bubble .ph { position: relative; z-index: 1; }
.bubble .ring + .ph { box-shadow: 0 0 0 2px var(--bg), 0 10px 30px rgba(0, 0, 30, .55); }

/* =========================================================
   Ověření e-mailu, zapomenuté heslo, fotky, nahlášení
   ========================================================= */
.hint { color: var(--dim); font-size: 13.5px; line-height: 1.45; margin: 0; }
.hint.center, .center { text-align: center; }
.auth .hint.center { margin-top: 18px; }
.link-btn { color: var(--cyan); font-weight: 600; font-size: 14.5px; padding: 6px; align-self: center; }
.link-btn.inline { padding: 0; font-size: inherit; }
.auth-icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(63,184,255,.25), rgba(155,92,255,.25)); border: 1px solid var(--line); }
.auth-icon svg { width: 36px; height: 36px; stroke: url(#g-brand); }
.auth-title { text-align: center; margin: 0; font-size: 26px; font-weight: 800; }
.auth-sub b { color: var(--text); }
.code-input {
  width: 100%; text-align: center; font-size: 32px !important; letter-spacing: 12px; font-weight: 800;
  padding: 14px 8px 14px 20px !important; font-variant-numeric: tabular-nums;
}
.ts-box:empty { display: none; }
.ts-box { display: flex; justify-content: center; min-height: 65px; }

/* galerie mých fotek */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.pg-item, .pg-add {
  position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden;
  background: var(--surface-solid); border: 1px solid var(--line);
}
.pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-item.main { border: 2px solid var(--cyan); }
.pg-item.pending img { filter: brightness(.65); }
.pg-item.rejected { border-color: rgba(255, 92, 122, .6); }
.pg-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--danger); }
.pg-status {
  position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; border-radius: 10px;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2;
  background: rgba(255, 184, 0, .92); color: #261800;
}
.pg-item.rejected .pg-status { background: rgba(255, 92, 122, .95); color: #fff; }
.pg-main {
  position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 5px; border-radius: 10px; font-size: 11px; font-weight: 700;
  background: rgba(5, 8, 40, .75); color: var(--cyan);
}
.pg-main svg { width: 13px; height: 13px; fill: var(--cyan); stroke: none; }
.pg-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed rgba(120, 140, 255, .5); background: rgba(10, 14, 60, .4); color: var(--dim); font-size: 12.5px; font-weight: 600; }
.pg-add svg { width: 30px; height: 30px; stroke: var(--cyan); }

/* zablokovaní */
.blocked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.blocked-list li { display: flex; align-items: center; gap: 12px; }
.blocked-list li.muted { color: var(--dim); font-size: 14px; }
.blocked-list .av { width: 42px; height: 42px; }
.blocked-list b { flex: 1; }
.btn-small { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; }

/* detail profilu: galerie */
.pd-gallery { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pd-gallery::-webkit-scrollbar { display: none; }
.pd-gallery img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.pd-dots { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 14px); display: flex; justify-content: center; gap: 5px; z-index: 2; pointer-events: none; }
.pd-dots i { width: 22px; height: 3.5px; border-radius: 2px; background: rgba(255,255,255,.35); }
.pd-dots i.on { background: #fff; }
.pd-more { position: absolute; top: calc(var(--safe-top) + 10px); right: 10px; background: rgba(5,8,40,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* sheet tlačítka */
.sheet-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 6px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); text-align: left; }
.sheet-btn:last-of-type { border-bottom: 0; }
.sheet-btn svg { width: 22px; height: 22px; }
.sheet-btn.danger { color: var(--danger); }
.sheet-btn[data-armed] { background: rgba(255, 92, 122, .12); border-radius: 12px; }
.sheet .hint { margin-top: 10px; }
.sheet-photo { display: flex; justify-content: center; margin: 8px 0 6px; }
.sheet-photo img { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
.bad { color: var(--danger); }

/* nahlášení */
.reasons { display: flex; flex-direction: column; gap: 8px; }
.reason { flex-direction: row !important; align-items: center; gap: 12px !important; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(5, 8, 40, .45); color: var(--text) !important; font-size: 15px !important; font-weight: 500 !important; cursor: pointer; }
.reason input { accent-color: var(--danger); width: 18px !important; height: 18px; margin: 0; padding: 0 !important; flex: none; border: 0 !important; }
.reason span { flex: 1; text-align: left; }
.reason:has(input:checked) { border-color: var(--danger); background: rgba(255, 92, 122, .12); }
.sheet { max-height: 90dvh; overflow-y: auto; }

/* ---------- Oznámení (bubliny) ---------- */
.notices {
  position: absolute; left: 12px; right: 12px; top: calc(var(--safe-top) + 10px); z-index: 1001;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.notice {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 20px; color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 20, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: nIn .35s cubic-bezier(.2,.9,.3,1.2);
  transition: opacity .3s, transform .3s;
}
.notice.ok  { background: linear-gradient(135deg, rgba(22, 150, 85, .95), rgba(46, 224, 122, .9)); }
.notice.bad { background: linear-gradient(135deg, rgba(190, 30, 60, .95), rgba(255, 92, 122, .9)); }
.notice.out { opacity: 0; transform: translateY(-16px); }
.n-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); flex: none; }
.n-icon svg { width: 22px; height: 22px; stroke-width: 2.6; }
.n-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n-text b { font-size: 15.5px; }
.n-text span { font-size: 13.5px; opacity: .95; }
@keyframes nIn { from { opacity: 0; transform: translateY(-24px) scale(.96); } }

/* ---------- Hot: odznaky a shoda ---------- */
.seg-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; }
.notice.match { background: linear-gradient(135deg, rgba(232, 93, 4, .96), rgba(255, 70, 140, .94) 55%, rgba(155, 92, 255, .94)); }
.n-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2.5px #fff; }
.n-av img, .n-av .initials { width: 100%; height: 100%; object-fit: cover; font-size: 20px; }

/* ---------- Výběr jazyka ---------- */
.switch i { font-style: normal; }
.lang-pick { position: absolute; top: calc(var(--safe-top) + 14px); right: 16px; }
.lang-pick select, .lang-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; font-size: 14px; font-weight: 600;
  padding: 8px 32px 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--text);
  background: rgba(10, 14, 60, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a8d8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
}
.lang-select { width: 100%; font-size: 16px; padding: 12px 40px 12px 14px; border-radius: 14px; margin-bottom: 10px; }
.lang-pick select option, .lang-select option { background: #10164c; color: #fff; }

/* ---------- NOW ---------- */
.top-col { flex-direction: column; align-items: flex-start; gap: 0; }
.now-sub { margin: 0 0 4px; color: var(--dim); font-size: 13.5px; }
#now-scroll { padding: 4px 14px calc(var(--tabbar-h) + var(--safe-bottom) + 30px); }
.now-compose { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; border-color: rgba(255, 184, 0, .35);
  background: linear-gradient(160deg, rgba(255, 184, 0, .10), rgba(24, 30, 92, .55) 50%); }
.now-compose textarea { width: 100%; resize: none; border: 1px solid var(--line); background: rgba(5, 8, 40, .55);
  border-radius: 16px; padding: 12px 14px; font-size: 16px; outline: none; color: var(--text); }
.now-compose textarea:focus { border-color: #ffb800; }
.now-compose-foot { display: flex; align-items: center; justify-content: space-between; }
.now-count { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.now-count.full { color: var(--danger); font-weight: 700; }
.btn-primary.small { padding: 10px 18px; font-size: 15px; }
.btn-primary.small svg, .now-write svg { width: 18px; height: 18px; }
.now-mine { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.now-mine-head { display: flex; align-items: center; gap: 8px; }
.now-mine-head b { font-size: 14px; }
.now-mine-head small { flex: 1; color: var(--dim); }
.now-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.now-item { display: flex; gap: 12px; align-items: flex-start; animation: pop .35s ease both; }
.now-av { position: relative; width: 58px; height: 58px; flex: none; border-radius: 50%; margin-top: 4px; }
.now-av .ring { position: absolute; inset: -4px; border-radius: 50%; }
.now-av .ph { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--surface-solid); box-shadow: 0 0 0 2px var(--bg); }
.now-av .initials { font-size: 22px; }
.now-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.now-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.now-head b { font-size: 15.5px; }
.now-head span { color: var(--dim); font-size: 12.5px; }
.now-bubble { position: relative; padding: 11px 14px; border-radius: 4px 20px 20px 20px; font-size: 15.5px; line-height: 1.4;
  background: linear-gradient(135deg, rgba(46, 123, 255, .28), rgba(155, 92, 255, .28)); border: 1px solid rgba(140, 170, 255, .3);
  word-wrap: break-word; }
.now-bubble.mine { border-radius: 20px; background: linear-gradient(135deg, rgba(255, 184, 0, .22), rgba(232, 93, 4, .22)); border-color: rgba(255, 184, 0, .4); }
.now-foot { display: flex; align-items: center; gap: 10px; }
.now-foot small { color: var(--dim); font-size: 12px; white-space: nowrap; }
.now-timer { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; min-width: 40px; }
.now-timer i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ffb800, #e85d04); }
.now-write { display: inline-flex; align-items: center; gap: 5px; }
.tabbar button.tab-now.active { color: #ffb800; }
.tabbar button.tab-now.active svg { fill: #ffb800; stroke: #ffb800; }
.tabbar button { font-size: 12.5px; }
.tabbar svg { width: 28px; height: 28px; }

/* ---------- Profil: zájmy, počítadla, sociální sítě ---------- */
.label-row { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; gap: 8px; }
.counter { color: var(--dim); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.counter.full { color: #ffb800; }
.interest-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ichip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(5, 8, 40, .45); color: var(--dim); transition: background .15s, color .15s, border-color .15s; }
.ichip i { font-style: normal; font-size: 15px; }
.ichip.on { color: #fff; border-color: rgba(140, 170, 255, .7); background: linear-gradient(135deg, rgba(46, 123, 255, .55), rgba(155, 92, 255, .55)); }
.interest-picker.full .ichip:not(.on) { opacity: .45; }
.socials-form { display: flex; flex-direction: column; gap: 10px; }
.social-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; margin: 0 !important; }
.social-name { width: 84px; flex: none; color: var(--text); font-size: 14px; }
.social-input { flex: 1; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 8, 40, .55); }
.social-input i { font-style: normal; color: var(--dim); padding-left: 12px; font-weight: 700; }
.form .social-input input { border: 0 !important; background: transparent !important; padding-left: 6px !important; }
.social-input:focus-within { border-color: var(--cyan); }
.chips span.common { border-color: rgba(46, 224, 122, .7); background: rgba(46, 224, 122, .14); }
.pd-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.social-link { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 14px; border-radius: 14px; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.social-link span { color: var(--dim); font-size: 13px; }
.social-link.instagram { border-color: rgba(225, 48, 108, .55); }
.social-link.x { border-color: rgba(255, 255, 255, .45); }
.social-link.facebook { border-color: rgba(24, 119, 242, .6); }
.social-link.tiktok { border-color: rgba(37, 244, 238, .5); }

/* ikony sociálních sítí v detailu profilu */
.pd-socials { gap: 12px; }
.social-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--text);
  background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 20, .45); transition: transform .15s; overflow: hidden; }
.social-icon:active { transform: scale(.92); }
.social-icon img { width: 28px; height: 28px; object-fit: contain; display: block; }
.social-icon.facebook { background: transparent; }
.social-icon.facebook img { width: 100%; height: 100%; }
.social-icon.x { background: #000; border: 1px solid rgba(255,255,255,.25); }
.social-icon.x img { width: 22px; height: 22px; }
.social-icon.tiktok { background: transparent; border: 1px solid rgba(255,255,255,.25); }
.social-icon.tiktok img { width: 100%; height: 100%; }

.social-name { display: flex; align-items: center; gap: 8px; width: 112px; }
.si { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; overflow: hidden; font-size: 13px; color: #fff; }
.si img { width: 16px; height: 16px; object-fit: contain; }
.si.facebook { background: transparent; } .si.facebook img { width: 100%; height: 100%; }
.si.x { background: #000; border: 1px solid rgba(255,255,255,.25); }
.si.tiktok { background: transparent; } .si.tiktok img { width: 100%; height: 100%; } .si.x img { width: 13px; height: 13px; }

/* ---------- Můj profil (náhled) a Nastavení ---------- */
.me-scroll { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 30px); }
.me-card { position: relative; }
.me-gear { top: calc(var(--safe-top) + 10px); }
.me-badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--cyan); background: rgba(63, 184, 255, .14); border: 1px solid rgba(63, 184, 255, .35); }
.me-edit { width: 100%; margin-top: 22px; }
.me-edit svg { width: 20px; height: 20px; }
.notice-line { margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: #ffd98a;
  background: rgba(255, 184, 0, .12); border: 1px solid rgba(255, 184, 0, .35); }
.settings-head h1 { margin: 0; font-size: 20px; font-weight: 800; }
.settings-scroll { flex: 1; padding-bottom: calc(var(--safe-bottom) + 30px); }
.settings-scroll .profile-form { padding-top: 14px; }

/* ---------- Údaje profilu (pozice, vztah, hledám, NSFW) ---------- */
.attr-edit { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.attr-title { font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.attr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichip .arrow { font-style: normal; font-weight: 800; font-size: 16px; line-height: 1; }
.ichip.na { border-style: dashed; }
.ichip.na.on { background: rgba(169, 168, 216, .25); border-color: var(--dim); border-style: solid; }
.sheet .attr-edit { margin-top: 4px; }
.pd-attrs { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); }
.pd-attrs[hidden] { display: none; }
.attr-row { display: flex; gap: 10px; font-size: 14.5px; }
.attr-row span { color: var(--dim); min-width: 92px; }
.attr-row b { font-weight: 600; }
#btn-filter { position: relative; }
#btn-filter.has-filter::after { content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: #ffb800; box-shadow: 0 0 0 2px var(--bg); }

/* ---------- Smazání účtu ---------- */
.danger-link { color: var(--danger); display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; }
.danger-link svg { width: 18px; height: 18px; }
.delete-text { margin: 0; line-height: 1.5; color: var(--text); }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 999px;
  font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(90deg, #d42a4c, #ff5c7a); box-shadow: 0 8px 24px rgba(255, 70, 110, .35); }
.btn-danger:disabled { opacity: .6; }

/* ---------- Zprávy: fotky, galerie, ořez ---------- */
.chat-who { flex: 1; min-width: 0; }
.chat-photos-btn { flex: none; }
.chat-input .round-btn.attach { width: 48px; height: 48px; }
.chat-input .round-btn.attach svg { width: 22px; height: 22px; }
.cl-new { color: var(--cyan); font-weight: 700; }
.msg.deleted { font-style: italic; color: var(--dim); background: transparent; border: 1px dashed var(--line); }

.msg-media {
  position: relative; width: min(66vw, 260px); aspect-ratio: var(--ar, .8); border-radius: 20px; overflow: hidden;
  background: var(--surface-solid); flex: none;
}
.msg-media.mine { align-self: flex-end; border-bottom-right-radius: 6px; }
.msg-media.them { align-self: flex-start; border-bottom-left-radius: 6px; }
.mg { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.mg::-webkit-scrollbar { display: none; }
.mg-img { flex: 0 0 100%; width: 100%; height: 100%; background: center / cover no-repeat; scroll-snap-align: start; }
.msg-media.blur .mg-img { filter: blur(26px) brightness(.8); transform: scale(1.15); }
.mg-veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; text-align: center; padding: 12px; background: rgba(5, 8, 40, .25);
}
.mg-veil svg { width: 34px; height: 34px; }

.mg-count { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; background: rgba(5, 8, 40, .6); z-index: 2; }
.msg-media.blur .mg-nav, .msg-media.blur .mg-count { display: none; }

.chat-attach { display: flex; gap: 8px; padding: 10px 12px 0; overflow-x: auto; border-top: 1px solid var(--line); }
.chat-attach + .chat-input { border-top: 0; }
.ca-item { position: relative; flex: none; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; }
.ca-item img { width: 100%; height: 100%; object-fit: cover; }
.ca-item button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 8, 40, .75); }
.ca-item button svg { width: 13px; height: 13px; stroke-width: 2.6; }

.row-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 14px 16px; text-align: left;
  border-radius: 18px; border: 1px solid var(--line); background: var(--surface);
}
.row-btn > svg { width: 24px; height: 24px; color: var(--cyan); flex: none; }
.row-btn span { flex: 1; min-width: 0; }
.row-btn b { display: block; font-size: 15.5px; }
.row-btn small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.row-btn em { font-style: normal; color: var(--dim); font-size: 13px; }
.row-btn .chev { width: 18px; height: 18px; color: var(--dim); }

.sheet-tall { max-height: 88%; overflow-y: auto; }
.sheet-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheet-title-row small { color: var(--dim); font-weight: 700; }
.sheet-tall .hint { margin: -6px 0 12px; }
.gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.gl-item, .gl-add { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-solid); }
.gl-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }
.gl-item.blur img, .gl-item.blur .gl-bg { filter: blur(18px) brightness(.8); transform: scale(1.15); }
.gl-item.sel { box-shadow: inset 0 0 0 3px var(--cyan); }
.gl-item.sel img { filter: brightness(.8); }
.gl-check {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(5, 8, 40, .35); font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.gl-item.sel .gl-check { background: var(--cyan); border-color: var(--cyan); color: #04102e; }
.gl-menu { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 8, 40, .6); }
.gl-menu svg { width: 18px; height: 18px; }
.gl-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed rgba(63, 184, 255, .55); background: rgba(63, 184, 255, .06); font-size: 13px; font-weight: 600; }
.gl-add svg { width: 28px; height: 28px; stroke: var(--cyan); }
.gl-empty { grid-column: 1 / -1; align-self: center; }

.crop-ov { background: #000; animation: fade .2s; }
.crop-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + 10px) 14px 10px; }
.crop-head .link-btn { padding: 8px 6px; margin: 0; }
.crop-head .strong { color: var(--cyan); font-weight: 800; }
.crop-stage { flex: 1; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-frame { position: absolute; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62); pointer-events: none; }
.crop-frame::before, .crop-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.crop-frame::before { border-left: 1px solid rgba(255,255,255,.3); border-right: 1px solid rgba(255,255,255,.3); left: 33.33%; right: 33.33%; }
.crop-frame::after { border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); top: 33.33%; bottom: 33.33%; }
.crop-tools { padding: 14px 20px calc(var(--safe-bottom) + 18px); display: flex; flex-direction: column; gap: 14px; }
.crop-tools input[type=range] { width: 100%; }
.crop-ratios { display: flex; justify-content: center; gap: 8px; }
.crop-ratios button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--dim); }
.crop-ratios button.on { color: #04102e; background: var(--cyan); border-color: var(--cyan); }

.viewer { background: #000; animation: fade .2s; }
.vw-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vw-track::-webkit-scrollbar { display: none; }
.vw-item { flex: 0 0 100%; display: grid; place-items: center; scroll-snap-align: start; }
.vw-img { width: 100%; height: 100%; background: center / contain no-repeat; }
.vw-item { height: 100%; }
.vw-close { position: absolute; top: calc(var(--safe-top) + 10px); right: 10px; background: rgba(5, 8, 40, .55); border-radius: 50%; }
.vw-count { position: absolute; bottom: calc(var(--safe-bottom) + 20px); left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: rgba(5, 8, 40, .6); font-weight: 700; font-size: 14px; }

.gl-bg { width: 100%; height: 100%; background: center / cover no-repeat; transition: filter .2s; }
/* ochrana fotek z konverzace před uložením (dlouhé podržení / výběr / přetažení) */
.msg-media, .viewer, #chatphotos-grid { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* čas odeslání u zprávy */
.msg time { display: block; font-size: 11px; line-height: 1; margin-top: 4px; text-align: right; opacity: .6; white-space: nowrap; }
.mg-time { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; background: rgba(5, 8, 40, .6); z-index: 2; }
.msg-media.blur .mg-time { display: none; }

/* ---------- Souhlasy, právní odkazy, explicitní fotky ---------- */
.consent-box { display: flex; flex-direction: column; gap: 10px; }
.check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 13.5px !important; line-height: 1.45; color: var(--text) !important; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check input:checked + span { background: var(--cyan); border-color: var(--cyan); }
.check input:checked + span::after { content: ""; width: 6px; height: 11px; border: solid #04102e; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.check i { font-style: normal; }
.check a, .legal-links a { color: var(--cyan); }
.legal-links { text-align: center; font-size: 13.5px; color: var(--dim); margin: 18px 0 0; }
input[type=date] { color-scheme: dark; min-height: 48px; }
input[readonly] { opacity: .65; }
.x18 { display: inline-block; padding: 1px 7px; border-radius: 7px; background: #ff5c7a; color: #fff; font-size: 12px; font-weight: 800; font-style: normal; }
.mg-veil .x18 { font-size: 16px; padding: 3px 10px; }
.gl-x18 { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: #ff5c7a; color: #fff; font-size: 11px; font-weight: 800; }
.gl-item.locked img { filter: grayscale(1) brightness(.45); }
.gl-item.locked::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.explicit-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.attr-note { margin-top: 8px !important; font-size: 12.5px; }

/* ---------- Reklamy a informační karty v Okolí ---------- */
.crd-bubble .ph { background: #fff; box-shadow: 0 0 0 3px #f5b83d, 0 0 0 6px var(--bg), 0 10px 30px rgba(0,0,30,.55) !important; }
.crd-bubble.info .ph { background: linear-gradient(135deg, #1a2a8a, #3a1d7a); box-shadow: 0 0 0 3px var(--cyan), 0 0 0 6px var(--bg), 0 10px 30px rgba(0,0,30,.55) !important; }
.crd-bubble .ph img { object-fit: contain; padding: 12% 14% 34%; }
.crd-tag {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%); z-index: 4; padding: 1px 8px; border-radius: 8px;
  background: #f5b83d; color: #2a1a00; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}
.crd-bubble.info .crd-tag { background: var(--cyan); color: #04102e; }
.crd-icon { width: 100%; height: 100%; display: grid; place-items: center; }
.crd-icon svg { width: 46%; height: 46%; stroke: url(#g-brand); stroke-width: 1.6; }
.crd-icon.big svg { width: 34%; height: 34%; }
.crd-hero { width: 100%; aspect-ratio: 4 / 3; max-height: 55vh; position: relative; background: var(--surface-solid); }
.crd-hero.logo-only { background: #fff; aspect-ratio: 16 / 9; }
.crd-hero.no-img { background: linear-gradient(135deg, #1a2a8a, #3a1d7a); aspect-ratio: 16 / 9; }
#crd-text { white-space: pre-line; }
.crd-hero.logo-only img { object-fit: contain !important; padding: 8%; }
.crd-hero .pd-gallery img { object-fit: cover; }
.crd-body { margin-top: 0 !important; padding-top: 18px !important; }
.crd-body h2 { font-size: 28px !important; }
.crd-label { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 9px; background: rgba(245, 184, 61, .16); color: #ffd98a; font-size: 12.5px; font-weight: 700; }
.crd-label.info { background: rgba(63, 184, 255, .16); color: #9fd8ff; }
#crd-actions a.btn-primary { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; }
#crd-actions a.round-btn { color: var(--text); text-decoration: none; }

/* ✓ odesláno / ✓✓ přečteno u mých zpráv */
.tick { font-style: normal; margin-left: 4px; letter-spacing: -3px; }
.tick::before { content: "✓"; }
time.read .tick::before { content: "✓✓"; }
time.read .tick { color: #9ff0ff; opacity: 1; letter-spacing: -4px; margin-right: 3px; }

/* šipky u všech galerií fotek (profil, zprávy, prohlížeč, karta reklamy) – dlouhý tenký poloprůhledný rámeček na výšku */
.pd-nav, .mg-nav, .vw-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 104px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
  background: rgba(5, 8, 40, .28); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s;
}
.pd-nav:active, .mg-nav:active, .vw-nav:active { background: rgba(5, 8, 40, .5); }
.pd-nav svg, .mg-nav svg, .vw-nav svg { width: 18px; height: 18px; stroke-width: 2.2; }
.pd-nav.prev, .vw-nav.prev { left: 10px; } .pd-nav.next, .vw-nav.next { right: 10px; }
.mg-nav { width: 26px; height: 76px; border-radius: 14px; }
.mg-nav svg { width: 16px; height: 16px; }
.mg-nav.prev { left: 7px; } .mg-nav.next { right: 7px; }
.vw-nav { height: 130px; width: 34px; border-radius: 18px; }

/* konec seznamu při přejetí na další profil */
.pd-bounce { animation: pdBounce .3s; }
@keyframes pdBounce { 30% { transform: translateX(-12px); } 60% { transform: translateX(8px); } }

/* detail profilu: fotky se nelistují prstem do strany (to přepíná profily), ale klepnutím a šipkami */
.pd-photo .pd-gallery { overflow-x: hidden; touch-action: pan-y; cursor: pointer; }