/* =========================
   iPhone / iOS safe area
   ========================= */
html,
body{
  margin: 0;
  min-height: 100%;
  background: #050f20;
  background-color: #050f20;
}

/* default: не бутаме цялата страница */
body{
  padding-top: 0 !important;
}

/* само в PWA app режим */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    .topbar{
      padding-top: env(safe-area-inset-top);
    }

    #ptrIndicator{
      top: calc(env(safe-area-inset-top) + 10px) !important;
    }
  }
}

:root{
  --bg:#071a33;
  --bg2:#0b2a55;
  --card:#0f2f5d;
  --card2:#0b254a;
  --text:#eaf1ff;
  --muted:rgba(234,241,255,.75);
  --accent:#4bd06a;
  --accent2:#2f8cff;
  --border:rgba(255,255,255,.10);
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --radius:18px;
  --container:1100px;
  --topbarH:72px;

  /* Added: small design tokens to reduce "magic numbers" */
  --radius-sm:12px;
  --radius-md:14px;
  --radius-lg:16px;
  --radius-xl:18px;

  --glass-1: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.06);
  --glass-3: rgba(255,255,255,.12);

  --border-weak: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

*{ box-sizing:border-box; }
img, svg, video { max-width:100%; height:auto; }
html, body { overflow-x:hidden; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(1200px 600px at 50% -20%, rgba(47,140,255,.28), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, #061327 55%, #050f20 100%);
  color:var(--text);
}

.container{
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 18px;
}
.main{padding:28px 0 48px;}

.muted{color:var(--muted); font-size:14px;}
.link{color:var(--text); opacity:.9}
.link:hover{opacity:1; text-decoration:underline}

/* =========================
   Topbar (DESKTOP DEFAULT)
   ========================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(5,16,33,.92) 0%, rgba(5,16,33,.65) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.topbar-inner{
  min-height:var(--topbarH);
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 0;
  flex-wrap:wrap;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  text-decoration:none;
}
.brand-logo{
  height:100px; width:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}

/* Navlinks (desktop: wrap, no horizontal scroll by default) */
.navlinks{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
  row-gap:6px;
}
.navlinks a{
  font-size:15px; letter-spacing:.2px;
  color:rgba(234,241,255,.85);
  padding:10px 8px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.navlinks a:hover{color:#fff}
.navlinks a.active{color:#fff; border-bottom-color: var(--accent);}

.topbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.toplink{opacity:.85}
.toplink:hover{opacity:1}
.lang{
  font-size:12px; font-weight:700;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--glass-1);
}

/* Buttons & pills */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:42px;                /* 🔥 фиксирана височина */
  padding:0 16px;             /* вместо 10px 14px */

  border-radius:12px;
  background: linear-gradient(180deg, rgba(75,208,106,.95), rgba(46,169,74,.95));
  color:#052013;
  font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);

  font-size:14px;
  line-height:1;
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow:none;
  height:42px;
}
.btn.large{
  height:46px;
  padding:0 20px;
  border-radius:14px;
  font-size:15px;
}

.pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--glass-1);
  color:rgba(234,241,255,.92);
  font-size:13px;
}

.event-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  margin:16px 0;
}

.action-form{
  display:flex;
  align-items:center;
  margin:0;
}

.action-form-inline{
  display:flex;
  align-items:center;
  gap:8px;
}

.action-status{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  white-space:nowrap;
  color:var(--text-muted);
}

.action-select{
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  box-shadow:none;
}

/* =========================
   Hero
   ========================= */
.hero.hero-banner-only{
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hero-banner-only .hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-banner-only .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(2, 10, 24, 0.18) 0%,
    rgba(2, 10, 24, 0.28) 35%,
    rgba(2, 10, 24, 0.42) 100%
  );
}

.hero-banner-only .hero-ticker{
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.hero-banner-only .hero-ticker-track{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  width: max-content;
  padding: 8px 0;
  will-change: transform;

  color: rgba(245,248,255,0.96);
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.hero-banner-only .hero-ticker-track > *{
  flex: 0 0 auto;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.hero-banner-only .ticker-item,
.hero-banner-only .ticker-sep{
  display: inline-flex;
  align-items: center;
}

.hero-banner-only .ticker-sep{
  opacity: 0.7;
}

@media (max-width: 768px){
  .hero.hero-banner-only{
    min-height: 190px;
  }

  .hero-banner-only .hero-ticker{
    top: 8px;
  }

  .hero-banner-only .hero-ticker-track{
    gap: 14px;
    padding: 7px 0;
    font-size: 13px !important;
  }
}


.stat{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(14,45,87,.78), rgba(10,34,67,.65));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}
.stat-ico{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  background: rgba(47,140,255,.20);
  border:1px solid rgba(47,140,255,.35);
}
.stat-val{font-size:20px; font-weight:900; line-height:1;}
.stat-lbl{font-size:12px; color:rgba(234,241,255,.72); margin-top:3px;}

/* =========================
   Feature grid + cards
   ========================= */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  margin-top:-64px;
  position:relative;
  z-index:2;
}
.feature-card{
  padding:20px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(238,245,255,.82));
  color:#0a1b33;
  border:1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  display:flex; gap:14px; align-items:flex-start;
}
.feature-ico{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:16px;
  background: rgba(47,140,255,.12);
  border:1px solid rgba(47,140,255,.22);
  font-size:24px;
}
.feature-title{font-weight:900; font-size:18px; margin-top:2px;}
.feature-text{margin-top:6px; color:rgba(10,27,51,.72); font-size:14px; line-height:1.35}

.section{margin-top:32px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px;}
.section h2{margin:0; font-size:22px;}

.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px;}
.card{
  padding:16px 16px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(15,47,93,.75), rgba(10,32,66,.72));
  border:1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.card:hover{border-color:rgba(75,208,106,.30)}
.card-title{font-weight:900; margin-bottom:6px}

/* Flash messages */
.flash{
  margin:14px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.flash.success{border-color: rgba(75,208,106,.35)}
.flash.error{border-color: rgba(255,90,90,.35)}

/* Footer */
.footer{margin-top:40px; border-top:1px solid var(--border);}
.footer-top{
  background: linear-gradient(180deg, rgba(9,32,64,.9), rgba(7,26,51,.95));
}
.footer-grid{
  padding:26px 0;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:18px;
}
.footer-brand img{height:128px; width:auto; margin-bottom:10px;}
.footer-col a{display:block; padding:6px 0; color:rgba(234,241,255,.82); font-size:14px;}
.footer-col a:hover{color:#fff}
.footer-title{font-weight:900; margin-bottom:8px; opacity:.95}
.footer-bottom{padding:14px 0; background: rgba(5,16,33,.92);}

/* =========================
   Responsive
   ========================= */


/* Mobile: менюто става хоризонтален скрол (chips), и подреждане без припокриване */
@media (max-width: 620px){
  .container{ padding:0 14px; }
  .brand-logo{ height:126px; }

  .topbar-inner{ gap:10px; }

  .navlinks{
    flex:1 1 100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    padding-bottom:4px;
    scroll-snap-type: x mandatory;
  }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks a{ scroll-snap-align: start; }

  .topbar-right{
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: 0;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* по-компактно вдясно */
  .pill{
    display:inline-flex;
    padding:6px 10px;
    font-size:12px;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .btn{ padding:9px 12px; }
  .lang{ padding:6px 8px; }



  .shield{ width:120px; }

  /* Better mobile grids */
  .feature-grid{
    grid-template-columns: 1fr;
    margin-top: -24px;
  }
  .cards{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* Extra: Chat page grid fix (за template-а с inline grid 320px 1fr) */
/* =========================
   Chat layout (specific)
   ========================= */
.chat-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px;
}

input,
textarea,
select {
  font-size: 16px;
}

/* tablet/phone: stack */
@media (max-width: 820px){
  .chat-grid{
    grid-template-columns:1fr;
  }
}
@media screen and (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
}


/* =========================
   Chat / unread mobile fixes
   ========================= */

.chat-user-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  overflow: visible !important;
}

.chat-user-pill .chat-user-label{
  display: inline-block;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-unread-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 0 0 2px rgba(7,26,51,.35);
}

.chat-conversation-pill{
  overflow: visible !important;
}

.chat-conversation-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.chat-conversation-title{
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-unread-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d6d;
  flex: 0 0 10px;
  margin-left: 8px;
  margin-right: 4px;
}

.chat-conversation-preview{
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* mobile */
@media (max-width: 620px){
  .chat-user-pill{
    padding-right: 24px !important;
    max-width: 170px;
  }

  .chat-user-pill .chat-user-label{
    max-width: 110px;
  }

  .chat-unread-badge{
    top: -5px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
    padding: 0 4px;
  }

  .chat-conversation-pill{
    max-width: 100% !important;
  }

  .chat-conversation-title{
    font-size: 14px;
  }

  .chat-conversation-preview{
    font-size: 11px;
  }
}

.user-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.user-link:hover {
  color: #9ec5ff;
  text-decoration: underline;
}

.user-link-muted {
  color: rgba(255,255,255,0.92);
}

/* =========================
   EVENTS LIST PAGE
========================= */

.events-page{
  max-width: 1180px;
  margin: 0 auto;
}

.events-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.events-topbar h1{
  margin:0;
  font-size:2.2rem;
  line-height:1.1;
}

.events-subtitle{
  margin-top:6px;
  font-size:.98rem;
  opacity:.82;
}

.events-list-rows{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.event-list-row{
  display:grid;
  grid-template-columns: 1.5fr auto;
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(15,47,93,.75), rgba(10,32,66,.72));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  color:inherit;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.event-list-row:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
  border-color:rgba(75,208,106,.28);
}

.event-list-row-past{
  opacity:.97;
}

.event-row-main{
  min-width:0;
}

.event-row-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.event-row-title{
  font-size:1.22rem;
  font-weight:800;
  line-height:1.2;
}

.event-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}

.event-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  font-size:.86rem;
  color:rgba(234,241,255,.88);
}

.event-meta-chip-comments{
  background:rgba(75,208,106,.18);
  border-color:rgba(75,208,106,.35);
}

.event-status-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.10);
}

.event-status-open{
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(76, 175, 80, 0.30);
  color: #b9f6ca;
}

.event-status-finished{
  background: rgba(33, 150, 243, 0.16);
  border-color: rgba(33, 150, 243, 0.30);
  color: #bbdefb;
}

.event-status-cancelled{
  background: rgba(244, 67, 54, 0.16);
  border-color: rgba(244, 67, 54, 0.30);
  color: #ffcdd2;
}

.event-status-past{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: rgba(234,241,255,.92);
}

.event-row-side{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.event-side-stat{
  min-width:88px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  text-align:center;
}

.event-side-stat-value{
  font-size:1.08rem;
  font-weight:800;
  line-height:1.1;
}

.event-side-stat-label{
  margin-top:4px;
  font-size:.74rem;
  opacity:.74;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.event-list-empty{
  padding:18px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  opacity:.88;
}

@media (max-width: 980px){
  .event-list-row{
    grid-template-columns:1fr;
    align-items:flex-start;
  }

  .event-row-side{
    justify-content:flex-start;
  }
}

@media (max-width: 620px){
  .events-topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .events-topbar h1{
    font-size:1.9rem;
  }

  .event-list-row{
    padding:16px;
  }

  .event-row-title{
    font-size:1.08rem;
  }

  .event-side-stat{
    flex:1 1 120px;
  }
}


/* Event detail layout */
.event-detail-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}

.event-panel{ padding:16px; }

.event-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

.event-kpi{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px;
}

.event-kpi-val{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
}

.event-block{ margin-top:14px; }
.event-block-title{
  font-weight:900;
  margin-bottom:8px;
}
.event-block-body{
  color: rgba(234,241,255,.86);
  line-height:1.45;
}

.event-people{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.event-person{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

.event-avatar{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  background: rgba(47,140,255,.20);
  border:1px solid rgba(47,140,255,.35);
}

.event-person-name{ font-weight:900; line-height:1.1; }

@media (max-width: 980px){
  .event-detail-grid{ grid-template-columns: 1fr; }
  .event-kpis{ grid-template-columns: 1fr; }
}

.pill-count{
  margin-left:auto;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.pill-number{
  font-weight:700;
}

/* 📱 Mobile tweaks */
@media (max-width: 620px){
  .pill-count{
    font-size:11px;
    padding:5px 8px;
    gap:4px;
  }

  .pill-label{
    display:none;
  }

  .pill-count::after{
    content:"спортуващи";
    margin-left:6px;
    font-size:11px;
    opacity:.85;
  }
}

.banner-wrap{
  margin-top: 10px;
  margin-bottom: 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.banner-wrap-bottom{
  margin-top: 22px;
  margin-bottom: 10px;
}

.site-banner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  min-height: 320px;
  background: linear-gradient(180deg, rgba(15,47,93,.55), rgba(10,32,66,.55));
}

.site-banner-img{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
}

.site-banner-title{
  font-weight:900;
  font-size: 38px;
  letter-spacing:.3px;
}

.site-banner-sub{
  margin-top:4px;
  font-size:14px;
  opacity: .9;
}
.site-banner-txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

@media (max-width: 620px){
  .site-banner{
    min-height: 90px;
    border-radius: 14px;
  }
  .site-banner-title{ font-size: 16px; }
  .site-banner-sub{ font-size: 12px; }
}

@media (max-width: 620px){
  .banner-wrap{
    margin-top: 18px;
    margin-bottom: 16px;
    padding: 0 10px;
  }

  .site-banner{
    padding: 14px 14px;
    border-radius: 16px;
    text-align: center;
  }

  .site-banner-title{
    font-size: 15px;
  }

  .site-banner-sub{
    font-size: 12px;
  }
}

.banner-wrap{
  position: relative;
}

.banner-wrap::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

/* ===== Banner with background image ===== */
.site-banner.site-banner-bg{
  position: relative;
  min-height: 160px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

/* лек overlay за четимост на текста */
.site-banner.site-banner-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,16,33,.60) 0%, rgba(5,16,33,.35) 45%, rgba(5,16,33,.60) 100%);
  pointer-events:none;
}

/* центриран текст върху банера */
.site-banner-overlay{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
}

@media (max-width: 620px){
  .site-banner.site-banner-bg{ min-height: 64px; }
  .site-banner-overlay{ min-height: 64px; padding: 10px 12px; }
}

/* Only apply hover transforms/colors on devices that actually hover */
@media (hover: hover) and (pointer: fine){
  .feature-card:hover{
    transform: translateY(-2px);
    transition: .15s ease;
  }
  .event-item:hover{
    border-color: rgba(75,208,106,.28);
    transform: translateY(-1px);
    transition: .12s ease;
  }
  .site-banner:hover{
    border-color: rgba(75,208,106,.25);
    transform: translateY(-1px);
    transition: .15s ease;
    background: linear-gradient(180deg, rgba(20,60,120,.55), rgba(12,40,80,.55));
  }
}

@media (max-width: 620px){
  .topbar-right{
    flex: 1 1 100% !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
  }
  .topbar-inner{
    flex-wrap: wrap !important;
  }
}

.install-banner{
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 420px;
  margin: auto;
  z-index: 9999;

  background: rgba(20,20,30,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
}

.install-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.install-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.install-close{
  background:none;
  border:none;
  color:#aaa;
  font-size:16px;
  cursor:pointer;
}

.install-close:hover{
  color:white;
}
.install-banner{
  bottom: max(20px, env(safe-area-inset-bottom));
}

@media (max-width: 620px){
  .install-banner{
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: none;
    padding: 12px;
    border-radius: 16px;
  }

  .install-content{
    align-items: flex-start;
    flex-direction: column;
  }

  .install-actions{
    width: 100%;
    justify-content: flex-end;
  }

  .install-actions .btn{
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* =========================
   Install banner (improved)
   ========================= */

.install-title{
  font-weight:800;
  margin-bottom:6px;
}

.install-steps{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color: var(--muted);
}

.install-step{
  display:flex;
  align-items:center;
  gap:8px;
}

.install-icon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  border-radius:6px;
  background: rgba(255,255,255,0.08);
}

/* =========================
   Dashboard
   ========================= */
.dashboard-wrap{
  padding: 12px 0 24px;
}

.dashboard-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.dashboard-hero h1{
  margin:0 0 6px;
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.05;
}

.dashboard-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin: 0 0 12px;
}

.dashboard-kpis-small{
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-bottom:18px;
}

.dashboard-kpi{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  background: var(--glass-1);
  backdrop-filter: blur(10px);
}

.dashboard-kpi.warning{
  border-color: rgba(255, 193, 7, 0.35);
}

.dashboard-kpi.stat-win{
  border-color: rgba(75,208,106,.25);
}

.dashboard-kpi.stat-draw{
  border-color: rgba(255,255,255,.12);
}

.dashboard-kpi.stat-loss{
  border-color: rgba(255,90,90,.22);
}

.dashboard-kpi-label{
  font-size:13px;
  color: var(--muted);
  margin-bottom:6px;
}

.dashboard-kpi-value{
  font-size:30px;
  font-weight:800;
  line-height:1;
}

.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

.dashboard-card{
  border:1px solid var(--border);
  background: var(--glass-1);
  border-radius:20px;
  padding:16px;
}

.dashboard-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.dashboard-card-head h2{
  margin:0;
  font-size:20px;
}

.dashboard-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dashboard-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.dashboard-item-main{
  min-width:0;
  flex:1;
}

.dashboard-item-top{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:6px;
}

.dashboard-item-top strong{
  font-size:16px;
}

.dashboard-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  color: var(--muted);
  font-size:13px;
}

.event-badge.warning{
  background: rgba(255, 193, 7, 0.12);
  color: #ffd666;
  border:1px solid rgba(255, 193, 7, 0.28);
}

.event-badge.success{
  background: rgba(75,208,106,.12);
  color: #87f5a0;
  border:1px solid rgba(75,208,106,.28);
}

/* =========================
   Dashboard mobile compact
   ========================= */
@media (max-width: 640px){

  .dashboard-wrap{
    padding: 8px 0 18px;
  }

  .dashboard-hero{
    margin-bottom: 12px;
  }

  .dashboard-hero h1{
    font-size: 28px;
    margin-bottom: 4px;
  }

  .dashboard-hero p{
    font-size: 14px;
    line-height: 1.35;
  }

  .dashboard-kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-bottom: 8px;
  }

  .dashboard-kpis-small{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  .dashboard-kpi{
    padding: 10px 12px;
    border-radius: 14px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .dashboard-kpi-label{
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .dashboard-kpi-value{
    font-size: 20px;
    line-height: 1;
  }

  .dashboard-kpis-small .dashboard-kpi{
    min-height: 74px;
    padding: 10px;
  }

  .dashboard-kpis-small .dashboard-kpi-value{
    font-size: 18px;
  }

  .dashboard-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashboard-card{
    padding: 14px;
    border-radius: 16px;
  }

  .dashboard-card-head{
    margin-bottom: 10px;
  }

  .dashboard-card-head h2{
    font-size: 17px;
    line-height: 1.2;
  }

  .dashboard-item{
    padding: 12px;
    gap: 10px;
  }

  .dashboard-item-top strong{
    font-size: 15px;
  }

  .dashboard-meta{
    font-size: 12px;
    gap: 6px 10px;
  }

  .dashboard-item .btn{
    width: auto;
    min-width: 84px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .pill{
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* =========================
   Profile stats
   ========================= */
.profile-stats-card{
  background: rgba(255,255,255,0.05);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.profile-stats-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}

.profile-stats-head h3{
  margin:0;
}

.profile-stats-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:12px;
}

.profile-stat-box{
  text-align:center;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);
}

.profile-stat-box.is-win{
  background:rgba(74,222,128,0.1);
  border-color:rgba(74,222,128,0.2);
}

.profile-stat-box.is-loss{
  background:rgba(255,77,77,0.1);
  border-color:rgba(255,77,77,0.2);
}

.profile-stat-box.is-draw{
  background:rgba(250,204,21,0.1);
  border-color:rgba(250,204,21,0.2);
}

.profile-stat-box.is-rate{
  background:rgba(96,165,250,0.1);
  border-color:rgba(96,165,250,0.2);
}

.profile-stat-value{
  font-size:24px;
  font-weight:800;
  line-height:1.1;
}

.profile-stat-label{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.btn-small{
  height:32px;
  padding:0 12px;
  font-size:13px;
  border-radius:10px;
}

@media (max-width: 900px){
  .profile-stats-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .profile-stats-card{
    padding:16px;
  }

  .profile-stats-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .profile-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
  }

  .profile-stat-box{
    padding:10px;
  }

  .profile-stat-value{
    font-size:20px;
  }

  .profile-stat-label{
    font-size:11px;
  }
}

/* =========================
   Dashboard sports
   ========================= */
.dashboard-sports-card{
  margin-bottom:16px;
}

.dashboard-sports-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

.dashboard-sport-tile{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:14px;
}

.dashboard-sport-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.dashboard-cta-row{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .dashboard-sports-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .dashboard-sports-grid{
    grid-template-columns: 1fr;
  }

  .dashboard-cta-row{
    justify-content:stretch;
  }

  .dashboard-cta-row .btn{
    width:100%;
  }
}

.dashboard-sport-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.sport-stat-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:700;
}

.sport-stat-win{
  background:rgba(74,222,128,.10);
  border-color:rgba(74,222,128,.22);
}

.sport-stat-draw{
  background:rgba(250,204,21,.10);
  border-color:rgba(250,204,21,.22);
}

.sport-stat-loss{
  background:rgba(255,77,77,.10);
  border-color:rgba(255,77,77,.22);
}
.sport-stat-rate{
  background: rgba(96,165,250,.10);
  border-color: rgba(96,165,250,.22);
}

/* =========================
   Sports pages
   ========================= */

.sports-wrap{
  max-width: 980px;
  margin: 0 auto;
}

.sports-page-head{
  margin-bottom: 18px;
}

.sports-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sport-list-card{
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,47,93,.74), rgba(10,32,66,.70));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.sport-list-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sport-list-top-main{
  min-width: 0;
  flex: 1;
}

.sport-list-actions{
  flex: 0 0 auto;
}

.sport-list-title{
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.15;
}

.sport-list-title a{
  text-decoration: none;
}

.sport-list-title a:hover{
  text-decoration: underline;
}

.sport-list-desc{
  margin: 0;
  max-width: 760px;
}

.sport-list-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sport-stat-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  color: rgba(234,241,255,.92);
}

.sport-list-admins,
.sport-detail-admins{
  margin-top: 14px;
}

.sport-list-label{
  font-size: 13px;
  font-weight: 800;
  color: rgba(234,241,255,.82);
  margin-bottom: 8px;
}

.sport-admin-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sport-admin-pill{
  text-decoration: none;
}

.sport-admin-pill:hover{
  text-decoration: none;
  border-color: rgba(75,208,106,.30);
}

.sport-detail-hero{
  margin-bottom: 22px;
}

.sport-detail-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.sport-detail-head-main{
  width: 100%;
  min-width: 0;
}

.sport-detail-desc{
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
}

.sport-detail-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sport-detail-kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}

.sport-kpi-card{
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.sport-kpi-label{
  font-size: 13px;
  color: rgba(234,241,255,.75);
  margin-bottom: 6px;
}

.sport-kpi-value{
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

/* sport admin cards + hover message button */

.sport-admin-cards{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sport-admin-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.sport-admin-card:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(75,208,106,.25);
  transform: translateY(-1px);
}

.sport-admin-name{
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}

.sport-admin-name:hover{
  text-decoration:underline;
}

.sport-admin-actions{
  opacity:0;
  transform:translateY(2px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.sport-admin-card:hover .sport-admin-actions{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.sport-admin-msg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(75,208,106,.12);
  border:1px solid rgba(75,208,106,.28);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.sport-admin-msg-btn:hover{
  text-decoration:none;
  filter:brightness(1.06);
}

@media (max-width: 620px){
  .sport-admin-card{
    width:100%;
    justify-content:space-between;
  }

  .sport-admin-actions{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

.sport-detail-toggle-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sports-events-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sport-event-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15,47,93,.72), rgba(10,32,66,.68));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  color: inherit;
  text-decoration: none;
}

.sport-event-row:hover{
  text-decoration: none;
  border-color: rgba(75,208,106,.30);
}

.sport-event-row-past{
  opacity: .96;
}

.sport-event-main{
  min-width: 0;
  flex: 1;
}

.sport-event-title{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.sport-event-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 13px;
  color: rgba(234,241,255,.76);
}

.sport-event-side{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.archive-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.sport-members-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sport-member-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: inherit;
  text-decoration: none;
}

.sport-member-row:hover{
  text-decoration: none;
  border-color: rgba(75,208,106,.28);
}

.sport-member-main{
  min-width: 0;
}

.sport-member-name{
  font-weight: 800;
  line-height: 1.2;
}

.sport-member-username{
  font-size: 13px;
}

.sport-member-pill{
  flex: 0 0 auto;
}
.sport-member-badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sport-member-role{
  font-size:12px;
  font-weight:700;
}

.sport-member-role.is-member{
  border-color: rgba(75,208,106,.35);
  background: rgba(75,208,106,.10);
  color: #d7ffe1;
}

.sport-member-role.is-notify{
  border-color: rgba(47,140,255,.35);
  background: rgba(47,140,255,.10);
  color: #d8ebff;
}

@media (max-width: 620px){
  .sport-member-badges{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 900px){
  .sport-detail-kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 620px){
  .sports-wrap{
    max-width: 100%;
  }

  .sport-list-card,
  .sport-event-row,
  .sport-member-row{
    padding: 14px;
  }

  .sport-list-top,
  .sport-event-row,
  .sport-member-row{
    flex-direction: column;
    align-items: flex-start;
  }

  .sport-list-title{
    font-size: 20px;
  }

  .sport-detail-kpis{
    grid-template-columns: 1fr;
  }

  .sport-event-side{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================
   Chat seen status
   ========================= */

.chat-seen-row{
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.chat-seen-status{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -1px;
  opacity: 0.6;
  transition: all 0.2s ease;
}

/* sent */
.chat-seen-status[data-seen="0"]{
  color: rgba(234,241,255,0.5);
}

/* seen */
.chat-seen-status[data-seen="1"]{
  color: #4bd06a; /* зелено */
  opacity: 1;
}

/* =========================
   bATCO
   ========================= */

/* FAB бутон */
.batco-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 56px;
  height: 56px;
  padding: 0;
  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #4bd06a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* PANEL */
.batco-panel{
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: min(360px, calc(100vw - 24px));
  height: 520px;

  background: linear-gradient(180deg, #0b1b34, #091a2f);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* hidden да работи коректно */
.batco-panel[hidden]{
  display: none !important;
}

/* HEADER */
.batco-head{
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: #eaf1ff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

#batcoClose{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: rgba(234,241,255,.72);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* MESSAGES */
.batco-messages{
  flex: 1;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* base bubble */
.batco-msg{
  padding: 10px 12px;
  max-width: 85%;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

/* USER MESSAGE */
.batco-msg-user{
  align-self: flex-end;
  background: rgba(75,208,106,.18);
  border: 1px solid rgba(75,208,106,.25);
  color: #eaf1ff;
  border-radius: 12px 12px 4px 12px;
}

/* BOT MESSAGE */
.batco-msg-bot{
  align-self: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #eaf1ff;
  border-radius: 12px 12px 12px 4px;
}

/* INPUT */
.batco-form{
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}

.batco-form input{
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: none;
  outline: none;
  background: transparent;
  color: #eaf1ff;
  font-size: 14px;
}

.batco-form input::placeholder{
  color: rgba(234,241,255,.5);
}

.batco-form button{
  appearance: none;
  -webkit-appearance: none;
  padding: 0 14px;
  border: none;
  background: #4bd06a;
  color: #05210f;
  font-weight: 800;
  cursor: pointer;
}

/* mobile */
@media (max-width: 620px){
  .batco-fab{
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }

  .batco-panel{
    right: 12px;
    left: 12px;
    bottom: 76px;
    width: auto;
    height: 58vh;
    max-height: 520px;
  }
}

.batco-icon{
  width: 24px;
  height: 24px;
}

/* =========================
   bATCO radar button
   ========================= */

.batco-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 56px;
  height: 56px;
  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(15,23,42,.92);

  color: #4bd06a;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);

  overflow: hidden;
}

/* radar sweep */
.batco-fab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: conic-gradient(
    rgba(75,208,106,.35),
    transparent 35%
  );
  transform: rotate(var(--radar-rotation, 0deg));
  z-index: 1;
}

/* radar icon */
.batco-icon{
  width: 24px;
  height: 24px;
  z-index: 3;
  position: relative;
}

.batco-plane{
  position: absolute;
  transform: translate(-50%, -50%) scale(.9);
  pointer-events: none;
  z-index: 2;
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(75,208,106,.75);
  transition: opacity .15s linear;
}
/* самолет 1 */
.plane-1{
  left: 70%;
  top: 30%;
  opacity: var(--plane1-opacity, 0);
}

/* самолет 2 (огледално) */
.plane-2{
  left: 30%;
  top: 70%;
  opacity: var(--plane2-opacity, 0);
}
.batco-fab:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(75,208,106,.4);
}

/* =========================
   HOVER
   ========================= */

.batco-fab:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(75,208,106,.4);
}

/* quick buttons */
.batco-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.batco-quick-btn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#eaf1ff;
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}

.batco-quick-btn:hover{
  background:rgba(75,208,106,.18);
  border-color:rgba(75,208,106,.3);
}

.batco-events-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.batco-event-card{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#eaf1ff;
  text-decoration:none;
}

.batco-event-card:hover{
  text-decoration:none;
  border-color:rgba(75,208,106,.28);
  background:rgba(255,255,255,.07);
}

.batco-event-title{
  font-weight:800;
  margin-bottom:4px;
  line-height:1.25;
}

.batco-event-meta{
  font-size:12px;
  color:rgba(234,241,255,.72);
  line-height:1.35;
}

.nav-link-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: #e74c3c;
  color: #fff;
}

/* =========================
   FORUM TOPIC VIEW
========================= */

.forum-topic-page {
  max-width: 1100px;
  margin: 0 auto;
}

.forum-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 14px;
  opacity: 0.9;
}

.forum-breadcrumbs a {
  text-decoration: none;
}

.forum-topic-main {
  background: rgba(15, 45, 92, 0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.forum-topic-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.forum-topic-head-main {
  flex: 1;
  min-width: 0;
}

.forum-topic-title {
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1.08;
}

.forum-topic-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.forum-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,0.10);
}

.forum-badge-warn {
  background: rgba(255, 183, 77, 0.18);
}

.forum-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  opacity: 0.9;
}

.forum-topic-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.forum-topic-actions form {
  margin: 0;
}

.forum-topic-body {
  font-size: 20px;
  line-height: 1.65;
}

.forum-replies-section {
  margin-top: 8px;
}

.forum-section-head {
  margin-bottom: 14px;
}

.forum-section-head h2,
.forum-section-head h3 {
  margin: 0;
}

.forum-replies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forum-reply {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: rgba(15, 45, 92, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
}

.forum-reply-side {
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.forum-reply-author {
  font-weight: 700;
  margin-bottom: 6px;
}

.forum-reply-date {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.4;
}

.forum-reply-main {
  padding: 18px 20px;
  min-width: 0;
}

.forum-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 12px;
}

.forum-reply-actions form {
  margin: 0;
}

.forum-inline-action {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

.forum-inline-action:hover {
  opacity: 1;
  text-decoration: underline;
}

.forum-inline-action.danger {
  color: #ffb3b3;
}

.forum-reply-body {
  font-size: 17px;
  line-height: 1.6;
  word-break: break-word;
}
.forum-reply + .forum-reply {
  margin-top: 2px;
}

.forum-reply-body p:first-child {
  margin-top: 0;
}

.forum-reply-body p:last-child {
  margin-bottom: 0;
}

.forum-topic-body p:first-child {
  margin-top: 0;
}

.forum-topic-body p:last-child {
  margin-bottom: 0;
}

.forum-empty-state {
  background: rgba(15, 45, 92, 0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  opacity: 0.9;
}

.forum-reply-form-wrap {
  margin-top: 24px;
  background: rgba(15, 45, 92, 0.84);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 22px;
}

.forum-reply-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forum-reply-form textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
}

.btn-sm {
  padding: 10px 14px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .forum-topic-title {
    font-size: 32px;
  }

  .forum-topic-head {
    flex-direction: column;
  }

  .forum-reply {
    grid-template-columns: 1fr;
  }

  .forum-reply-side {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 12px;
  }

  .forum-reply-main {
    padding-top: 14px;
  }

  .forum-reply-actions {
    justify-content: flex-start;
  }

  .forum-topic-body {
    font-size: 18px;
  }
}

/* =========================
   FORUM CATEGORY VIEW
========================= */

/* =========================
   FORUM CATEGORY VIEW
========================= */

.forum-category-page {
  max-width: 1180px;
  margin: 0 auto;
}

.forum-category-page-compact {
  padding-top: 4px;
}

.forum-category-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}

.forum-category-title {
  margin: 0 0 6px;
  font-size: 36px;
  line-height: 1.1;
}

.forum-category-desc {
  font-size: 15px;
  opacity: 0.86;
}

.forum-table-wrap {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10, 33, 70, 0.82);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

.forum-table {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) 180px 180px 80px 90px;
  gap: 0;
  align-items: center;
}

.forum-table-head {
  background: rgba(255,255,255,0.05);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}

.forum-table-head > div {
  padding: 14px 16px;
}

.forum-topic-item {
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: background 0.18s ease;
}

.forum-topic-item:hover {
  background: rgba(255,255,255,0.03);
}

.forum-topic-item > div {
  padding: 16px;
}
.forum-topic-item {
  position: relative;
}

.forum-topic-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.18s ease;
}

.forum-topic-item:hover::before {
  background: rgba(255,255,255,0.22);
}

.forum-col-topic {
  min-width: 0;
}

.forum-topic-mainline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.forum-topic-link {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}

.forum-topic-link:hover {
  text-decoration: underline;
}

.forum-topic-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.forum-flag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
}

.forum-flag-lock {
  background: rgba(255, 183, 77, 0.18);
}

.forum-author-name {
  font-weight: 700;
  line-height: 1.35;
}

.forum-author-date,
.forum-activity-date {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 4px;
  line-height: 1.35;
}

.forum-count-number {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.forum-col-count {
  text-align: center;
}

.forum-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.forum-page-indicator {
  font-size: 14px;
  opacity: 0.85;
}

@media (max-width: 980px) {
  .forum-table {
    grid-template-columns: minmax(0, 1.6fr) 150px 150px 70px 80px;
  }

  .forum-topic-link {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .forum-category-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .forum-category-title {
    font-size: 30px;
  }

  .forum-table-head {
    display: none;
  }

  .forum-topic-item {
    display: block;
  }

  .forum-topic-item > div {
    padding: 10px 14px;
  }

  .forum-col-author,
  .forum-col-activity,
  .forum-col-count {
    display: inline-block;
    width: auto;
    padding-top: 0 !important;
  }

  .forum-col-author,
  .forum-col-activity {
    margin-right: 16px;
  }

  .forum-col-count {
    margin-right: 12px;
    font-size: 15px;
    font-weight: 700;
  }

  .forum-count-number {
    font-size: 15px;
    text-align: left;
  }

  .forum-col-count::before {
    opacity: 0.7;
    margin-right: 6px;
    font-size: 12px;
    text-transform: uppercase;
  }

  .forum-topic-item .forum-col-count:nth-of-type(4)::before {
    content: "Отг:";
  }

  .forum-topic-item .forum-col-count:nth-of-type(5)::before {
    content: "Прегл:";
  }
}

/* =========================
   FORUM HOME
========================= */

.forum-home-page {
  max-width: 1180px;
  margin: 0 auto;
}

.forum-home-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.forum-home-topbar h1 {
  margin: 0;
  font-size: 38px;
}

/* Categories */

.forum-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.forum-category-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(10, 33, 70, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease;
}

.forum-category-row:hover {
  background: rgba(255,255,255,0.04);
}

.forum-category-left {
  min-width: 0;
}

.forum-category-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

.forum-category-desc {
  font-size: 14px;
  opacity: 0.85;
}

.forum-category-right {
  text-align: center;
  min-width: 70px;
}

.forum-category-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.forum-category-count-label {
  font-size: 12px;
  opacity: 0.75;
  text-transform: uppercase;
}

/* Latest */

.forum-latest {
  margin-top: 10px;
}

.forum-col-category a {
  text-decoration: none;
}

.forum-col-category a:hover {
  text-decoration: underline;
}

/* Mobile */

@media (max-width: 768px) {
  .forum-home-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .forum-home-topbar h1 {
    font-size: 30px;
  }

  .forum-category-name {
    font-size: 18px;
  }

  .forum-category-count {
    font-size: 22px;
  }
}

/* =========================
   FORUM COMPOSE / EDIT
========================= */

.forum-compose-page {
  max-width: 980px;
  margin: 0 auto;
}

.forum-compose-card {
  background: rgba(15, 45, 92, 0.84);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}

.forum-compose-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.forum-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forum-form-group label {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.92;
}

.forum-form-group input,
.forum-form-group select,
.forum-form-group textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
  padding: 14px 16px;
  font: inherit;
}

.forum-form-group textarea {
  min-height: 180px;
  resize: vertical;
}

.forum-form-group input:focus,
.forum-form-group select:focus,
.forum-form-group textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}

.forum-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}