:root{--authwall:url('../img/auth-prague.jpg');--line:rgba(255,255,255,.12);--text:#eafff3;--wall:url('../img/bg.jpg');--chatwall:var(--wall);--dmwall:var(--wall);--profilewall:var(--wall);--topbarH:60px}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;height:100%}
/* Topbar is fixed, so we reserve space to prevent content hiding under it */
body{margin:0;background:#0b1611;color:var(--text);background-image:var(--wall);background-size:cover;background-attachment:fixed;padding-top:var(--topbarH)}
a{color:#7dffc1}
/* Keep header always visible while scrolling chat/DM feeds (they have their own scroll containers) */
.topbar{position:fixed !important;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,0,0,.70);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:1000}
.brand{font-weight:900}
.ghost{background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:6px 10px}
.btn-purple{background:rgba(147,51,234,.92);border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff;padding:10px 14px}
.btn-purple:hover{filter:brightness(1.05)}
.btn-purple:active{transform:translateY(1px)}
/* Default buttons (fix: browser-default white buttons + inherited light text had low contrast) */
button{font-family:inherit;color:var(--text);border:1px solid var(--line);background:rgba(0,0,0,.35);border-radius:10px;padding:8px 10px;cursor:pointer}
button:active{transform:translateY(1px)}
button:disabled{opacity:.6;cursor:not-allowed}
.citysel select{border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--text);border-radius:10px;padding:6px 8px}

/* Generic inputs used across the app (admin panels, filters, etc.) */
input.inp, select.inp, textarea.inp{
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  color:var(--wh-text);
  border-radius:12px;
  padding:10px 12px;
  min-height:44px;
}
input.inp::placeholder, textarea.inp::placeholder{ color: rgba(234,255,243,.62); }

.tabs{display:flex;gap:8px;padding:8px 12px;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch;background:rgba(0,0,0,.45);border-bottom:1px solid var(--line);position:sticky;top:var(--topbarH);z-index:50}

/* Mobile: DM tab is redundant (DM is accessible via bottom envelope FAB). */
@media (max-width: 720px){
  .tabs .tab[data-view="view-dm"]{display:none}
}
.tabs.hidden{display:none}
.tab{border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--text);border-radius:10px;padding:8px 10px}
.tab.active{border-color:#39ff91}

#views{padding:12px;max-width:1100px;margin:0 auto}
.view{display:none;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:14px;padding:10px}
.view.active{display:block}

/* Mobile safety padding so content never sits under the floating action buttons */
@media (max-width: 720px){
  .view{ padding-bottom: 96px; }
  #view-admin{ padding-bottom: 120px; }
}

.feed{display:flex;flex-direction:column;gap:10px;min-height:55vh;padding-bottom:72px}
.msg{display:flex;gap:8px}
.msg .ava{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid var(--line);flex:0 0 36px}
.msg .ava img{width:100%;height:100%;object-fit:cover}
.msg .bubble{background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:16px;padding:8px 12px;max-width:85%}
.msg .name{font-weight:700;font-size:12px;opacity:.9;margin-bottom:4px}
.msg .text img{max-width:220px;border-radius:10px;border:1px solid var(--line);display:block;margin-top:6px}
.msg .actions{display:flex;gap:6px;margin-top:6px}
.msg .actions button{border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);border-radius:10px;padding:4px 8px;font-size:12px}

/* Admin lists should use full-width bubbles (otherwise user list looks cramped on mobile) */
#view-admin .msg .bubble{ max-width: 100%; }

.composer.sticky{position:sticky;bottom:8px;display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.72);padding:8px;border:1px solid var(--line);border-radius:12px}
.composer input{flex:1;min-width:160px;padding:10px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--text)}
.composer button,.filebtn{border:1px solid rgba(58,255,145,.8);background:rgba(0,0,0,.25);color:var(--text);border-radius:12px;padding:10px 12px}
.filebtn input{display:none}

/* Chat emoji picker */
.emojiBtn{min-width:44px;line-height:1}
.emojiPanel{position:fixed;bottom:calc(var(--navbarH) + 70px);z-index:999999;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px;display:flex;gap:6px;flex-wrap:wrap;max-width:min(420px, calc(100vw - 20px))}
.emojiPanel .emojiItem{padding:8px 10px;font-size:18px;line-height:1;border-radius:12px}

.modal{position:fixed;inset:0;
  /* Lighter overlay (requested) so dark text stays readable */
  background: rgba(135, 206, 250, .22);
  display:flex;align-items:center;justify-content:center;z-index:30}
.modal[hidden]{display:none !important}

/* When auth is open, disable background interactions */
body.auth-open .topbar,
body.auth-open .tabs,
body.auth-open #views{
  filter: blur(6px);
  opacity: .35;
  pointer-events: none;
  user-select: none;
}

/* Auth modal – match reference (full background, centered card) */
.modal#modalAuth{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  padding: 14px 10px;
}
.auth-card{ 
  width: min(92vw, 760px);
  background: rgba(12,24,18,.92);
  color: #ffffff;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 30px 120px rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;
  display:flex;
  height:auto;
  max-height: calc(100dvh - 28px);
  min-height: unset;
  
}

/* --- AUTH: readability + mobile fit --- */
.auth-title,
.auth-form label,
.auth-form .inp span,
.auth-remember,
.auth-remember label,
.auth-or,
.auth-hero,
.auth-hero .txt{
  color: #ffffff;
}

/* keep secondary links as-is (resend / register / forgot) */

/* Google button: make main text visible and keep Google letters colored */
.btn-auth-google{ color:#ffffff; }
.btn-auth-google .gword span{ font-weight:700; }

/* Bigger type line (hooks) */
.auth-hero{ margin-top: 10px; }
.auth-hero .txt{ font-size: 18px; line-height: 1.25; }
.auth-hero .cursor{ height: 20px; }

/* Logo a bit larger */
.auth-brand img{ height: 52px; width: 52px; }

/* Mobile: make the auth card always fit without scrolling */
@media (max-width: 520px){
  .auth-page{ padding: 0; }
  .auth-card{ width: min(92vw, 420px); max-height: calc(100vh - 24px); overflow: hidden; }
  .auth-card-inner{ padding: 16px 14px; }
  .auth-form input{ height: 46px; }
}
.auth-left{
  display:block;
  width: 42%;
  background-image: var(--authwall);
  background-size: cover;
  background-position: center;
  position: relative;
}
.auth-left:after{
  content:'';
  position:absolute;inset:0;
  background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
}
.auth-right{padding:20px 18px; width:58%; display:flex; flex-direction:column}
.auth-right h2{margin:0 0 8px 0;font-size:28px}
.auth-brand{display:flex;flex-direction:column-reverse;align-items:center;gap:10px;margin-bottom:10px;text-align:center}
.auth-brand img{width:52px;height:52px}
.auth-brand{gap:8px;margin-bottom:10px}
.auth-heroLine{display:block;min-height:38px;font-weight:900;font-size:clamp(24px,4.5vw,42px);letter-spacing:.4px;line-height:1.12;color:rgba(255,255,255,.96);text-shadow:0 10px 28px rgba(0,0,0,.28)}
.auth-heroLine .cursor{display:inline-block;transform:translateY(2px);opacity:.9}
/* If any builds insert an "OR/Nebo" separator, keep it hidden for compact auth */
#modalAuth .auth-or{display:none !important;}
/* Keep login compact on very small screens (no scroll-down needed) */
@media (max-height: 760px){
  #modalAuth .auth-right{padding:18px 18px;}
  #modalAuth .auth-form .inp input,#modalAuth .auth-form .inp select{padding:12px 12px;}
  #modalAuth .auth-form input{height:44px;}
  #modalAuth .auth-row{margin-top:6px;}
  #modalAuth .auth-row .hint{display:none;}
  #modalAuth .auth-switch{margin-top:8px;}
}
@media (max-height: 690px){
  #modalAuth .auth-heroLine{font-size:22px;min-height:28px;}
  #modalAuth .auth-right h2{margin-bottom:6px;}
  #modalAuth .auth-form .btn.primary{padding:12px 12px;}
}
.auth-form .inp span{display:block;font-size:12px;opacity:.8;margin-bottom:6px}
.auth-form .inp input,.auth-form .inp select{width:100%;padding:14px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.35);color:rgba(234,255,243,1)}
.auth-form .btn.primary{border:none;border-radius:16px;padding:14px 14px;font-weight:800;background:linear-gradient(90deg,#e34aa2,#c744ff);color:#fff}
.auth-social .btn.ghost{width:100%;border-radius:16px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.8);color:#0b1a12}
.auth-switch .link,.auth-form .link{color:rgba(234,255,243,.95);opacity:.92}
.auth-switch .link:hover,.auth-form .link:hover{opacity:1;text-decoration:underline}
.auth-form .link{background:transparent;border:none}
.auth-right .x{position:absolute;top:14px;right:14px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.75);border-radius:12px;width:40px;height:40px}

/* Make Google sign-in the primary action (esp. desktop) */
.auth-social-main{margin:6px 0 12px 0;}
.google-icon-btn.google-main{
  width:100%;
  justify-content:center;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:rgba(234,255,243,.98);
}
.google-icon-btn.google-main:hover{background:rgba(255,255,255,.14)}

/* On very small heights, keep everything visible without "jitter" */
@media (max-width: 520px){
  #modalAuth{padding:10px 8px;}
  .auth-right{padding:16px 14px;}
  .auth-heroLine{min-height:30px;}
}

.card{width:min(92vw,820px);background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;backdrop-filter:blur(8px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.ava-lg{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);object-fit:cover}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.map{height:420px;border-radius:12px;overflow:hidden}
.dm{display:grid;grid-template-columns:300px 1fr;gap:12px}
#dmMessages{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto}
.adm-only{display:none;border:1px dashed var(--line);padding:8px;border-radius:10px;margin-top:10px}
.muted{opacity:.7;font-size:12px}

.toast{
  position:sticky; bottom:88px;
  background:rgba(0,0,0,.9);
  border:1px solid var(--line);
  padding:8px 10px; border-radius:10px; width:max-content; max-width:90%;
  margin:6px 8px; z-index:22
}
#globalToast{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px }

/* Floating quick actions */
.fab{
  position:fixed;
  right:16px;
  bottom:16px;
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  color:var(--text);
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
}
.fab:active{ transform:translateY(1px) }
.fab-menu{
  position:fixed;
  right:16px;
  bottom:80px;
  z-index:80;
  width:min(260px, calc(100vw - 32px));
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:10px;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.fab-menu button{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  margin:6px 0;
}
.fab-menu button:hover{ background:rgba(255,255,255,.09) }
.fab-menu button.danger{ border-color:rgba(255,80,80,.45) }

@media (min-width: 900px){
  .fab, .fab-menu{ right:24px; }
}

/* Preloader */
#preloader{
  position:fixed; inset:0; z-index:99999;
  background: #071311;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
#preloader.hidden{display:none !important;}
#preloader .box{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
#preloader .spin{
  width:56px;height:56px;border-radius:50%;
  border:5px solid rgba(255,255,255,.15);
  border-top-color: rgba(58,255,145,.95);
  animation:spin 1.1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#preloader .hint{opacity:.8;font-size:13px}
#preloader .btn{
  border:1px solid rgba(58,255,145,.9);
  background:rgba(0,0,0,.25);
  color:var(--text); border-radius:12px;
  padding:10px 14px; cursor:pointer;
}
#preloader .timer{opacity:.7;font-size:12px}

/* Greeting overlay */
#greetOverlay.modal{z-index:100000;}
#greetOverlay .card{max-width:520px;text-align:center}
#greetOverlay img.rose{width:84px;height:84px;margin:6px auto 0;display:block}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;margin-left:6px}
.badge.premium{border-color:rgba(58,255,145,.8)}
.badge.admin{border-color:rgba(255,196,0,.75);}

html,body{overflow-x:hidden}

/* Prevent horizontal swipe on mobile (only vertical pan) */
body{ touch-action: pan-y; }


/* --- Preloader --- */
#preloader{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;text-align:center;color:#eafff3}
#preloader.hidden{display:none!important}
#preloader .pre-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.75)),url('../img/bg.jpg');background-size:cover;background-position:center;filter:saturate(1.1)}
#preloader .box{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:22px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);width:min(92vw,520px)}
#preloader .logo{font-weight:900;letter-spacing:.06em}
#preloader .title{font-weight:700;font-size:20px}
#preloader .subtitle{opacity:.9}
#preloader .row{display:flex;gap:10px;align-items:center}
#preloader .spin{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:#39ff91;animation:sp 1s linear infinite}
#preloader .timer{opacity:.85;font-size:13px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:520px){
  #preloader .title{font-size:18px}
}


/* === MAKÁME CZ Theme v7 === */
body{background-image:linear-gradient(rgba(10,18,14,.72),rgba(10,18,14,.82)),var(--wall)!important}
.topbar{gap:10px;padding:12px 14px}
.brand{display:flex;align-items:center;gap:10px;min-width:140px}
.brand-logo{height:34px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.tabs{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);text-decoration:none;color:var(--text);font-weight:600}
.tab.active{background:rgba(0,212,166,.18);border-color:rgba(0,212,166,.55)}
.view{padding:12px}
.card{width:min(92vw,820px);background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;backdrop-filter:blur(8px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
#chatFeed{display:flex;flex-direction:column;gap:10px}
.msg{display:flex;gap:10px;align-items:flex-end}
.msg .ava{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.2);overflow:hidden;flex:0 0 44px;background:rgba(255,255,255,.06)}
.msg .ava img{width:100%;height:100%;object-fit:cover}
.bubble{border-radius:22px;padding:10px 14px}
.msg.me{flex-direction:row-reverse}
.msg.me .bubble{background:rgba(0,212,166,.18);border-color:rgba(0,212,166,.45)}
.msg.other .bubble{background:rgba(0,0,0,.35)}
.msg.bot .bubble{background:rgba(255,77,109,.16);border-color:rgba(255,77,109,.35)}
.composer{position:sticky;bottom:0;margin-top:10px;padding:10px;border-radius:18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px)}
.composer input,.composer textarea{background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.14)!important;color:var(--text)!important;border-radius:14px!important}
.btn.primary{background:linear-gradient(135deg,#00D4A6,#2F6BFF)!important;border:none!important}
.btn.danger{background:linear-gradient(135deg,#FF4D6D,#FF3B30)!important;border:none!important}
#authModal .modal{background:rgba(135, 206, 250, .22);color:#111;border-radius:22px;max-width:420px}
#authModal .modal h2{margin:0 0 8px 0}
#authModal input{background:#eef2ff;border:1px solid #d6dcff;color:#111}
#authModal .googleBtn{background:#fff;border:1px solid #e5e7eb;color:#111}
#preloader .logo-img{height:56px;width:auto;filter:drop-shadow(0 18px 32px rgba(0,0,0,.35))}
#preloader .slogan{display:block;margin-top:6px;font-weight:600;opacity:.92}
@media (max-width:520px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
}

/* === Stage7 v3 fixes (no overlays, responsive brand, colored auth & preloader) === */
.view{background:rgba(0,0,0,.18) !important;border:none !important;padding:0 !important;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)}
#views{padding:10px !important}

/* Make brand fit on small screens */
.brand{min-width:0}
.brand .brand-text{font-size:18px;letter-spacing:.02em;white-space:nowrap}
@media (max-width:420px){
  .brand .brand-text{font-size:15px}
  .topbar{padding:10px 10px}
}

/* Auth modal: colored + background image, like reference */
.modal-backdrop{backdrop-filter: blur(10px)}
#modalAuth .auth-card{
  background: rgba(20,20,24,.72);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
#modalAuth .auth-left{
  background: linear-gradient(120deg, rgba(0,0,0,.35), rgba(0,0,0,.15)), url('../img/bg.jpg') center/cover no-repeat;
}
#modalAuth .auth-right{
  background: rgba(255,255,255,.10);
}
#modalAuth h2, #modalAuth h3, #modalAuth p, #modalAuth label, #modalAuth a{color:#fff}
#modalAuth input{
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
#modalAuth input::placeholder{color:rgba(255,255,255,.65)}
#modalAuth .btn.primary{background: linear-gradient(90deg,#ff2f86,#ff9b2f); color:#111; font-weight:800}
#modalAuth .googlebtn{background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff}

/* Preloader more colorful */
#preloader{
  background: linear-gradient(135deg, rgba(0,0,0,.70), rgba(0,0,0,.30)), url('../img/bg.jpg') center/cover no-repeat;
}
#preloader .pre-box{
  background: rgba(10,10,14,.55);
  border:1px solid rgba(255,255,255,.14);
}

/* Hide wallpaper camera by default (admin enables) */
#wallCamWrap{display:none}

/* Chat bubbles always visible, no frame */
.msg{backdrop-filter: blur(8px)}
.msg.me{background: transparent}
.msg.other{background: transparent}


/* === Mobile messenger UI (drawer + icons) === */
.mobile-only{ display:none; }
.desktop-only{ display:inline-flex; }

.iconbtn{
  border:0;
  background:rgba(0,0,0,.25);
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  line-height:1;
  backdrop-filter: blur(10px);
}
.mebtn{
  border:0;
  background:rgba(0,0,0,.25);
  padding:5px;
  border-radius:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
}
#meMiniAva{
  width:28px;height:28px;border-radius:50%;
  object-fit:cover;
  display:block;
}

/* === Topbar mini badges (admin / plan) === */
.mebtn{ position: relative; }
.mini-badge{
  position:absolute;
  right:-6px;
  bottom:-6px;
  font-size:9px;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.70);
  color:#fff;
  line-height:1;
  pointer-events:none;
  white-space:nowrap;
}
.mini-badge.admin{ border-color: rgba(255,80,80,.75); }
.mini-badge.plan{ top:-6px; bottom:auto; border-color: rgba(58,255,145,.75); }

/* === Premium bot plan bar (inside DM composer) === */
.bot-plan-bar{
  flex-basis:100%;
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.bot-plan-bar button{
  flex:1 1 auto;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(58,255,145,.55);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font-weight:700;
}
.bot-plan-bar button.selected{
  border-color: rgba(255,255,255,.70);
  box-shadow: 0 0 0 2px rgba(58,255,145,.20) inset;
}
@media (max-width: 720px){
  .bot-plan-bar{ gap:6px; }
  .bot-plan-bar button{ padding:8px 8px; }
}



/* === Premium / Privilegia panel (QR + requests) === */
.bot-premium-panel{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,.25);
}
.bot-premium-qr{
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}
.bot-premium-reqs{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bot-premium-req{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(0,0,0,.18);
}
.bot-premium-req .status{
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  opacity:.95;
}
.bot-premium-req .meta{
  font-size:12px;
  opacity:.9;
}
.bot-premium-req .meta .muted{ opacity:.75; }
.bot-premium-req img{
  width:44px;height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.2);
}
/* === Coachmarks / tour (arrows, no dim) === */
.mk-tour-tooltip{
  position:fixed;
  z-index:999999;
  max-width:320px;
  background:rgba(22, 82, 200, .90);
  border:1px solid rgba(170, 220, 255, .35);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.mk-tour-title{ font-weight:800; margin:0 0 6px 0; }
.mk-tour-text{ margin:0 0 10px 0; opacity:.95; }
.mk-tour-actions{ display:flex; gap:8px; justify-content:flex-end; }
.mk-tour-actions button{ padding:8px 10px; border-radius:12px; }
.mk-tour-arrow{
  position:absolute;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}
.mk-tour-tooltip[data-arrow="top"] .mk-tour-arrow{
  top:-8px; left:20px;
  border-bottom:8px solid rgba(22, 82, 200, .90);
}
.mk-tour-tooltip[data-arrow="bottom"] .mk-tour-arrow{
  bottom:-8px; left:20px;
  border-top:8px solid rgba(22, 82, 200, .90);
}
.mk-tour-highlight{
  outline: 2px solid rgba(58,255,145,.75);
  outline-offset: 4px;
  border-radius: 14px;
  position:relative;
  z-index:999998;
}


.drawer-btn.neon{
  border:1px solid rgba(0,255,213,.55);
  background:rgba(0,0,0,.25);
  color:#eaffff;
  padding:8px 12px;
  border-radius:14px;
  cursor:pointer;
  box-shadow: 0 0 10px rgba(0,255,213,.55), 0 0 22px rgba(0,255,213,.25);
  animation: neonPulse 2.6s ease-in-out infinite;
}
@keyframes neonPulse{
  0%,100%{ box-shadow: 0 0 10px rgba(0,255,213,.55), 0 0 22px rgba(0,255,213,.25); transform:translateZ(0); }
  50%{ box-shadow: 0 0 14px rgba(0,255,213,.85), 0 0 36px rgba(0,255,213,.35); }
}

/* Drawer */
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 9998;
}
.drawer{
  position:fixed; top:0; left:0; height:100vh;
  width:min(82vw, 320px);
  background:rgba(10,10,14,.82);
  backdrop-filter: blur(14px);
  border-right:1px solid rgba(255,255,255,.12);
  transform: translateX(-105%);
  transition: transform .22s ease;
  z-index: 9999;
  padding: 10px 10px 14px;
}
.drawer.open{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 10px; }
.drawer-title{ font-weight:800; letter-spacing:.4px; }
.drawer-item{
  display:flex; gap:10px; align-items:center;
  padding:12px 10px;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
}
.drawer-item:hover{ background: rgba(255,255,255,.08); }
.drawer-sep{ height:1px; background:rgba(255,255,255,.10); margin:10px 0; }
.drawer-btn2{
  width:100%;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.drawer-btn2 + .drawer-btn2{ margin-top:8px; }

/* Mobile header layout tweaks */
@media (max-width: 720px){
  .mobile-only{ display:inline-flex !important; }
  .desktop-only{ display:none !important; }
  .tabs{ display:none !important; }
  .topbar .brand{ display:none; }
  #toggleTabs{ display:none !important; }
  #wallCamWrap{ display:none !important; }
  .topbar .row{ gap:8px; }
  .citysel{ flex: 1; }
}


/* === User Card modal === */
/*
  IMPORTANT:
  Earlier builds blurred/disabled the whole #views container while any modal is open.
  But most modals live *inside* #views in DOM (Auth / Rules / Help / User card / etc.).
  That made modals dimmed + unclickable on mobile.

  Fix: blur/disable only the background UI (views + topbar + tabs), never the modals.
*/
body.modal-open .topbar,
body.modal-open .tabs,
body.modal-open #views > .view{ filter: blur(6px); opacity:.35; pointer-events:none; user-select:none; }
.usercard{
  width:min(92vw,520px);
  background:rgba(15,27,22,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:16px;
  box-shadow:0 30px 120px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  position:relative;
}
.usercard .x{
  position:absolute; top:12px; right:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:var(--text);
  border-radius:12px;
  width:40px;height:40px;
}
.uc-head{ display:flex; gap:12px; align-items:center; }
.uc-ava{ width:64px;height:64px;border-radius:50%; border:2px solid rgba(255,255,255,.16); object-fit:cover; }
.uc-meta .uc-name{ font-size:18px; }
.uc-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.uc-actions button{ border:1px solid rgba(58,255,145,.8); background:rgba(0,0,0,.25); color:var(--text); border-radius:14px; padding:10px 12px; }
.uc-actions .ghost{ border-color: rgba(255,255,255,.18); }
.uc-block{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.10); }


/* === Clickable user profiles === */
[data-uid]{cursor:pointer}

/* User profile modal */
.modal-card.usercard{max-width:820px}
.usercard .pill{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
}
.stars{display:inline-flex;gap:6px}
.stars button{
  border:none;
  background:transparent;
  font-size:20px;
  line-height:1;
  padding:2px 2px;
  cursor:pointer;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.stars button.off{opacity:.35}
.stars button.on{opacity:1}

/* Vacancy cards */
.vac-item{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;background:rgba(0,0,0,.22)}
.vac-item .t{font-weight:800}
.vac-item .m{opacity:.8;font-size:12px;margin-top:4px}
.vac-item .d{margin-top:8px;white-space:pre-wrap}


.badge-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  border-radius:999px;
  background:#ff3b30;
  color:#fff;
  font-size:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:2px solid rgba(0,0,0,.6);
}
.iconbtn{position:relative}


/* --- v6 UI fixes: stars visibility, modal close reliability, responsive layout --- */
body, #app, #views{max-width:100%; overflow-x:hidden;}
.modal{z-index:99999;} /* ensure modal always above drawer/topbar */
.card.modal-card{position:relative; max-width:min(900px, 92vw); max-height:92vh; overflow:auto;}
.card.modal-card header{position:sticky; top:0; z-index:2; background:rgba(12,14,16,.65); backdrop-filter: blur(10px);}
.card.modal-card header button{position:relative; z-index:5; pointer-events:auto;}
/* Stars */
.stars button{
  background:transparent;
  border:none;
  font-size:22px;
  line-height:1;
  padding:2px 4px;
  cursor:pointer;
  text-shadow:0 0 10px rgba(255,215,0,.25);
}
.stars button.on{ color:#ffd54a; filter:drop-shadow(0 0 6px rgba(255,213,74,.35)); }
.stars button.off{ color:rgba(255,255,255,.25); }
.stars button:focus{ outline:2px solid rgba(0,255,200,.35); border-radius:8px; }

/* Auth modal polish */
#modalAuth .auth-card{
  max-width:min(520px, 92vw);
  border-radius:22px;
  background:rgba(15,18,22,.72);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
}
#modalAuth .auth-card h1, #modalAuth .auth-card h2{ letter-spacing:.4px; }
#modalAuth input, #modalAuth select{
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
#modalAuth .btn-primary{ border-radius:16px; }

/* Hide topbar login/logout on mobile; use drawer buttons instead */
@media (max-width: 860px){
  #btnLogin, #btnSignout{ display:none !important; }
}

/* Composer must not overflow */
.composer{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.composer input{flex:1 1 320px; min-width:0;}
.composer button, .composer .filebtn{flex:0 0 auto;}

/* DM grid stability */
.dm{min-width:0;}
.dm > *{min-width:0;}
@media (max-width: 860px){
  .dm{grid-template-columns: 1fr !important;}
}

.wallcam{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;user-select:none}
.wallcam input{display:none}
.authwallcam{position:absolute;left:14px;top:14px;z-index:5;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.18);color:#fff}
@media (max-width:720px){
  .auth-card{flex-direction:column; min-height: unset;}
  .auth-left{width:100%; height:170px;}
  .auth-right{width:100%;}
}

/* === Admin gating: hidden by default === */
.adm-only, .admin-only { display:none; }
body.is-admin .adm-only, body.is-mod .adm-only, body.is-admin .admin-only { display:block; }

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:920px){.grid2{grid-template-columns:1fr}}

.filebtn{display:inline-flex;gap:8px;align-items:center;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04)}
.filebtn input{display:none}
.thumb{width:46px;height:46px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.pill{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:12px}
.pill-danger{background:rgba(255,66,111,.92);color:#fff;border-color:rgba(255,255,255,.25);font-weight:700}

/* DM read receipts (looks like a small button/pill) */
#dmReadHint{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:12px;line-height:1}

#view-chat{background-image:var(--chatwall);background-size:cover;background-attachment:fixed}
#view-dm{background-image:var(--dmwall);background-size:cover;background-attachment:fixed}
#view-profile{background-image:var(--profilewall);background-size:cover;background-attachment:fixed}

/* Badges (counts) */
.badge-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  background:rgba(255,66,111,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.iconbtn{position:relative}

/* Mini loaders */
.feed-rel{position:relative}
.mini-load{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  font-weight:600;
  z-index:5;
  /* Never block taps/clicks under the loader (mobile issue: buttons not clickable) */
  pointer-events:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.mini-load .mini-status{font-weight:700;}
.mini-load .mini-tip{font-weight:500; opacity:.85; font-size:12px; line-height:1.25;}


@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile UX: open DM room as a full-screen overlay card to avoid cramped split view */
@media (max-width: 720px){
  .dm{ display:block; }
  #view-dm .dm > .card:first-child{ display:block; }
  body.dm-room-open #view-dm .dm > .card:first-child{ display:none; }
  #view-dm .dm > .card:last-child{ display:none; }
  body.dm-room-open #view-dm .dm > .card:last-child{
    display:block;
    position:fixed;
    inset:62px 10px 10px 10px;
    z-index:99990;
  }
  body.dm-room-open #view-dm .dm > .card:last-child header{
    position:sticky;
    top:0;
    z-index:2;
  }
}

/* Scroll down button */
.scroll-down{
  position:absolute;
  right:14px;
  bottom:78px;
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  z-index:6;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.scroll-down:hover{background:rgba(0,0,0,.55)}

/* Friends view polish */
#view-friends .feed{gap:10px}
#view-friends .msg{border-radius:16px}
#view-friends .empty{padding:10px 12px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.03)}

/* === v8 fixes: readability, time, admin actions, friends UX === */
.hint.warn{color:#ff3b30;font-weight:700}

/* Message meta row */
.msg .meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.msg .time{font-size:12px;opacity:.65;white-space:nowrap;margin-left:8px}

/* Admin actions */
.adminActions{display:flex;gap:6px;margin-top:6px}
.adminActions button{border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:var(--text);border-radius:10px;padding:4px 8px;font-size:12px}

/* Auth modal stronger overlay for contrast */
.modal#modalAuth{background:rgba(0,0,0,.68) !important;}
.auth-card{background:rgba(255,255,255,.96) !important;}
.auth-right h2{color:#0b1a12}
.auth-form .inp span{color:#0b1a12;opacity:.75}
.auth-form .inp input,.auth-form .inp select{color:#0b1a12}

/* Friends requests section hidden unless needed */
#friendsReqSection{padding-top:8px}



/* Auth modal readability + mobile fit */
#modalAuth .overlay{ background:rgba(0,0,0,.72) !important; }
#modalAuth .auth-card{ max-width: 420px; width: min(92vw, 420px); }
#modalAuth .auth-card h1, #modalAuth .auth-card h2{ color: rgba(255,255,255,.95); }
#modalAuth .auth-card .muted, #modalAuth .auth-card label{ color: rgba(255,255,255,.78); }
#modalAuth input, #modalAuth select{ color: rgba(255,255,255,.95); }
#modalAuth input::placeholder{ color: rgba(255,255,255,.55); }
#modalAuth .spam-note{ color: #ff4b4b; font-weight: 700; }
@media (max-width: 520px){
  #modalAuth .auth-card{ padding: 16px !important; border-radius: 18px !important; }
  #modalAuth .auth-card h1{ font-size: 20px !important; }
  #modalAuth .auth-card h2{ font-size: 16px !important; }
  #modalAuth .row{ gap: 8px !important; }
}

/* v11: make auth modal fit without requiring page scroll */
@media (max-width: 520px){
  #modalAuth .auth-card{ max-height: 88vh; overflow:auto; }
  #modalAuth .auth-social .googlebtn, #modalAuth .auth-social .btn.ghost{ padding: 12px 14px; }
}

/* v11: tighter topbar on mobile so icons fit */
@media (max-width: 520px){
  /* Keep header in one line on mobile (menu • city • bell • profile) */
  .topbar{ flex-wrap: nowrap; gap: 8px; }
  .topbar .citySelect{ flex: 1 1 180px; min-width: 180px; }
  .topbar .right{ flex: 0 0 auto; }
}

/* v11: make "scroll down" button more visible (requested blue) */
#chatScrollDown, #dmScrollDown{ border:1px solid rgba(90,160,255,.55) !important; background: rgba(90,160,255,.25) !important; }

/* Ensure no light underlay in composer */
.composer input::placeholder,.composer textarea::placeholder{opacity:.75}
/* Members */
#membersFeed .member{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 0;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
#membersFeed .member .ava{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 36px}
#membersFeed .member .ava img{width:100%;height:100%;object-fit:cover}
#membersFeed .member .meta{flex:1;min-width:0}
#membersFeed .member .meta .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#membersFeed .member .meta .sub{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#membersFeed .member .acts{display:flex;gap:8px;align-items:center}
#membersFeed .member .acts button{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:inherit;border-radius:12px;padding:8px 10px}


/* Mobile admin & tabs fixes */
@media (max-width: 720px){
  .tabs{ overflow-x:auto; white-space:nowrap; gap:8px; padding:8px; }
  .tab{ flex:0 0 auto; }
  .admin-grid{ grid-template-columns: 1fr !important; }
  .panel{ padding:12px; }
  .member{ grid-template-columns: 46px 1fr; }
  .member .acts{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
  input, button, select, textarea{ font-size:16px; } /* prevent iOS zoom */
}

/* === v10: auth modal dark theme + prevent autofill glare === */
#modalAuth .auth-card{ background: rgba(0,0,0,.55) !important; border:1px solid rgba(255,255,255,.14) !important; }
#modalAuth .auth-right h2{ color: rgba(255,255,255,.95) !important; }
#modalAuth .auth-form .inp span{ color: rgba(255,255,255,.80) !important; }
#modalAuth .auth-form .inp input,
#modalAuth .auth-form .inp select{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.95) !important;
}
#modalAuth .auth-form .inp input::placeholder{ color: rgba(255,255,255,.55) !important; }
#modalAuth .auth-social .btn.ghost{ background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.92) !important; border:1px solid rgba(255,255,255,.18) !important; }

/* Chrome autofill */
#modalAuth input:-webkit-autofill,
#modalAuth input:-webkit-autofill:hover,
#modalAuth input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.95) !important;
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.35) inset !important;
}

/* Admin layout: keep panels usable on both PC and mobile */
#view-admin{overflow:hidden;}
#view-admin .admin-grid{display:grid;grid-template-columns: 1fr 1fr;gap:14px;align-items:start;}
#view-admin .panel{max-height: calc(100vh - 220px); overflow:auto;}
@media (max-width: 920px){
  #view-admin .admin-grid{grid-template-columns: 1fr;}
  #view-admin .panel{max-height: unset;}
}

/* === v10: auth modal dark theme + prevent autofill glare === */
#modalAuth .auth-card{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
#modalAuth .auth-right h2{ color: rgba(255,255,255,.95) !important; }
#modalAuth .auth-form .inp span{ color: rgba(255,255,255,.80) !important; }
#modalAuth .auth-form .inp input,
#modalAuth .auth-form .inp select{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.95) !important;
}
#modalAuth .auth-form .inp input::placeholder{ color: rgba(255,255,255,.55) !important; }
#modalAuth .auth-social .btn.ghost{ background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.95) !important; border:1px solid rgba(255,255,255,.18) !important; }
#modalAuth .auth-right .x{ background: rgba(0,0,0,.35) !important; color: rgba(255,255,255,.95) !important; border:1px solid rgba(255,255,255,.18) !important; }

/* Chrome autofill */
#modalAuth input:-webkit-autofill,
#modalAuth input:-webkit-autofill:hover,
#modalAuth input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.95) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.35) inset !important;
}

/* Admin layout fit: keep admin panels scrollable */
#view-admin{ overflow:auto; max-height: calc(100vh - 180px); padding-bottom: 18px; }
.admin-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start; }
.admin-grid > .panel{ min-width:0; }

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


/* Admin view mobile usability */
#view-admin .row{flex-wrap:wrap; gap:8px;}
#view-admin input, #view-admin select{max-width:100%;}
@media(max-width:920px){
  #view-admin .cards{display:block;}
  #view-admin .card{margin-bottom:12px;}
  .fab-menu{max-height:70vh; overflow:auto;}
}

/* Mini loaders - smoother (keep absolute overlay inside .feed-rel) */
.mini-load{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  padding:10px 12px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  z-index:6;
}

/* Chat: "Load older" button (15 at a time) */
.load-older{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  z-index:6;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.mini-load:before{
  content:"";
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color:transparent;
  animation:spin 0.9s linear infinite;
  opacity:.8;
}
@keyframes spin{to{transform:rotate(360deg);}}
.mini-load.center{
  left:50%;
  right:auto;
  top:50%;
  transform:translate(-50%,-50%);
  width: calc(100% - 32px);
  max-width:420px;
  text-align:left;
}
.mini-load .spinner{display:none;}



/* v15: bot editor helpers */
.stack{display:flex;flex-direction:column}
.scRow{display:flex;gap:8px;align-items:flex-start}
.scRow textarea{flex:1;min-width:180px}
.scRow .mini{max-width:140px}
.scRow .xbtn{padding:6px 10px}
@media (max-width:640px){
  .scRow{flex-direction:column}
  .scRow .mini{max-width:100%}
}


.cookie-modal{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);z-index:100005;pointer-events:auto}
.wave-modal{ align-items:center; }

.cookie-card, .cookie-card *{pointer-events:auto}
.cookie-card{width:min(92vw,640px);border-radius:22px;background:rgba(12,24,18,.94);border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 120px rgba(0,0,0,.55)}
.cookie-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}


.promo-card{width:min(92vw,840px);border-radius:22px;background:rgba(12,24,18,.96);border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 120px rgba(0,0,0,.55)}
.promo-body{display:flex;gap:14px;align-items:stretch}
.promo-img{width:280px;max-width:40vw;object-fit:cover;border-radius:16px}
.promo-text{flex:1;min-width:240px}
@media (max-width:720px){
  .promo-body{flex-direction:column}
  .promo-img{width:100%;max-width:100%;height:180px}
}


.dm-mobile-card{width:min(96vw,820px);max-height:92vh;overflow:auto;border-radius:22px;background:rgba(12,24,18,.96);border:1px solid rgba(255,255,255,.10)}
#dmMobileMount .feed{min-height:60vh}


/* =====================
   PráceHub.cz — Welcome overlay (Prague background, gold glow)
   ===================== */
.welcome{
  position:fixed;
  inset:0;
  z-index:130000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;

  /* Scoped variables (do NOT override the global theme) */
  --wh-gold1:#f6d37a;
  --wh-gold2:#c79a2c;
  --wh-glow: rgba(255,210,120,.35);
  --wh-text:#f5f6ff;
  --wh-muted: rgba(245,246,255,.82);
  --wh-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.welcome[hidden]{ display:none; }

.welcome__backdrop{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,20,.35) 0%, rgba(0,0,0,.55) 100%),
    url("../img/pracehub-welcome-1920x1080.webp") center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05);
}
@media (max-width: 520px){
  .welcome__backdrop{
    background:
      linear-gradient(180deg, rgba(10,10,20,.35) 0%, rgba(0,0,0,.55) 100%),
      url("../img/pracehub-welcome-1080x1920.webp") center/cover no-repeat;
  }
}

.welcome__panel{
  position:relative;
  width:min(520px, 92vw);
  max-height: 92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  color:var(--text);
  padding:18px 16px 16px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(26,29,58,.70), rgba(14,16,38,.66));
  border: 1px solid rgba(246,211,122,.22);
  box-shadow: 0 0 0 2px rgba(199,154,44,.18), 0 26px 70px rgba(0,0,0,.60);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

/* Title + tagline */
.brandTitle{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:900;
  letter-spacing:.5px;
  font-size:clamp(30px, 6vw, 40px);
  line-height:1.05;
  background: linear-gradient(90deg, #e8f1ff 0%, #ffd28a 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brandTagline{
  font-family:"Poppins",system-ui;
  font-weight:700;
  font-size:clamp(13px, 3.3vw, 16px);
  color:var(--wh-muted);
  margin-top:6px;
}

/* Typewriter box - fixed height so nothing jumps */
.twBox{
  width:100%;
  max-width:520px;
  min-height:46px; /* IMPORTANT: fixed space */
  padding:10px 14px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(26,29,58,.78), rgba(16,18,40,.72));
  border: 2px solid rgba(246,211,122,.55);
  box-shadow: 0 0 0 2px rgba(199,154,44,.25), 0 16px 40px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.twText{
  font-family:"Poppins",system-ui;
  font-size:clamp(13px, 3.6vw, 15px);
  font-weight:800;
  color:#ffe8c0;
  text-shadow: 0 2px 16px rgba(255,210,120,.25);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.twCaret{
  width:10px;
  height:18px;
  background:#ffe8c0;
  border-radius:3px;
  animation: caretBlink 1s steps(2,end) infinite;
}
@keyframes caretBlink{ 50%{ opacity:0; } }

/* Stats */
.statsRow{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.statCard{
  padding:12px 10px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(26,29,58,.75), rgba(14,16,38,.72));
  border: 2px solid rgba(246,211,122,.55);
  box-shadow: 0 0 0 2px rgba(199,154,44,.22), var(--wh-shadow);
}
.statNum{
  font-family:"Poppins",system-ui;
  font-size:clamp(26px, 7vw, 34px);
  font-weight:900;
  color:#ffd98f;
  text-shadow: 0 10px 25px rgba(255,210,120,.22);
}
.statLbl{
  font-family:"Poppins",system-ui;
  font-size:clamp(11px, 3.2vw, 13px);
  font-weight:800;
  color:rgba(245,246,255,.88);
  margin-top:2px;
}

/* Online */
.onlineRow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(10,12,28,.35);
  border: 1px solid rgba(255,255,255,.10);
}
.flagMini{ font-size:18px; }
.onlineLbl{
  font-family:"Poppins",system-ui;
  font-weight:800;
  color:rgba(245,246,255,.9);
}
.onlineNum{
  font-family:"Poppins",system-ui;
  font-weight:900;
  color:#ffffff;
}

/* Language buttons */
.langRow{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.langBtn{
  height:62px;
  border-radius:16px;
  border: 2px solid rgba(246,211,122,.55);
  background: linear-gradient(180deg, rgba(39,44,92,.78), rgba(18,20,48,.78));
  box-shadow: 0 0 0 2px rgba(199,154,44,.22), var(--wh-shadow);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:"Poppins",system-ui;
  font-weight:900;
  font-size:clamp(14px, 4.2vw, 18px);
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
.langBtn:hover{ transform: translateY(-1px); filter:brightness(1.06); }
.langBtn:active{ transform: translateY(1px) scale(.99); }
.flagBig{ font-size:26px; }

/* CTA button */
.ctaBtn{
  width:100%;
  height:66px;
  border-radius:18px;
  border: 2px solid rgba(246,211,122,.75);
  background: linear-gradient(180deg, rgba(58,64,132,.85), rgba(21,24,58,.85));
  box-shadow: 0 0 0 2px rgba(199,154,44,.25), 0 22px 55px rgba(0,0,0,.55);
  color:#ffffff;
  font-family:"Poppins",system-ui;
  font-weight:900;
  font-size:clamp(18px, 5.4vw, 22px);
  letter-spacing:.3px;
  cursor:pointer;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.ctaBtn:hover{ filter:brightness(1.06); }

/* Hint arrow */
.hint{
  position:absolute;
  bottom:92px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  pointer-events:none;
}
.hintText{
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:12px;
  font-family:"Poppins",system-ui;
  font-weight:900;
  font-size:12px;
}
.hintArrow{ font-size:18px; animation: bounce 1.2s infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* Extremely small heights: compress so overlay never scrolls */
@media (max-height: 700px){
  .welcome__panel{ gap:10px; padding:14px 14px 12px; }
  .langBtn{ height:56px; }
  .ctaBtn{ height:60px; }
  .twBox{ min-height:42px; }
  .hint{ bottom:84px; }
}


/* =====================
   Chat message actions (Report / Menu)
   ===================== */
.msg .metaRight{ display:flex; align-items:center; gap:8px; }
.msgActions{ display:flex; align-items:center; gap:6px; }
.msgAct{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  border-radius:10px;
  padding:3px 8px;
  font-size:14px;
  cursor:pointer;
}
.msgAct:hover{ background: rgba(0,0,0,.28); }
.msgAct:active{ transform: translateY(1px); }

.auth-right input,.auth-right .inp{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.auth-right input::placeholder{color:rgba(255,255,255,.65)}

/* v17 additions */
.modal-card{ max-width: 920px; width: min(920px, 94vw); max-height: 86vh; overflow:auto; }
.doc{ line-height:1.5; }
.doc h3{ margin: 6px 0 10px; }
.ava-lg{ width:72px; height:72px; border-radius:18px; object-fit:cover; }
.broadcast-banner{
  position: fixed;
  left: 10px; right: 10px; bottom: 90px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 12px 12px;
  display:none;
  gap: 10px;
  align-items: center;
  z-index: 9999;
}
.broadcast-banner .bb-left{ flex:1; min-width: 180px; }
.broadcast-banner .bb-title{ font-weight:700; }
.broadcast-banner .bb-text{ font-size: 13px; opacity: .92; margin-top: 2px; }
.broadcast-banner .bb-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 520px){
  .broadcast-banner{ bottom: 70px; }
  .broadcast-banner .bb-actions{ justify-content:flex-start; }
}
/* Admin buttons wrapping on mobile */
#view-admin .row{ flex-wrap:wrap; }


/* === v17.4 fixes: cookie clicks + mini loaders === */
.cookie-modal{ z-index:2147483647; }
.cookie-modal[hidden]{ display:none !important; }

/* Mini loader: show spinner + better layout */
.mini-load{
  display:flex;
  align-items:center;
  gap:10px;
}
.mini-load::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color: rgba(58,255,145,.95);
  animation: spin 1s linear infinite;
  flex:none;
}


/* === v17.6 Mobile fit + real mini spinners === */
html, body{overflow-x:hidden; max-width:100vw;}
/* Prevent accidental horizontal scroll from panels */
#app, .view, .modal, .sheet{max-width:100vw;}
/* Mini loader with spinner */
.mini-load{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:10px 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.28);
  color:var(--text);
  font-weight:600;
}
.mini-load::before{
  content:"";
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.85);
  animation: mk_spin 0.9s linear infinite;
  flex:0 0 auto;
}
@keyframes mk_spin{to{transform:rotate(360deg);}}

/* Mobile: make main layout fit without sideways scrolling */
@media (max-width: 520px){
  .tabs{gap:6px; padding:8px;}
  .tab{padding:8px 10px; font-size:12px;}
  .topbar{padding:10px 10px;}
  .citysel select{max-width:44vw;}
  /* Ensure feeds scroll inside, not whole page */
  #chatFeed, #dmFeed, #friendsList, #membersFeed{max-height: calc(100vh - 210px); overflow:auto;}
  #dmThreads{max-height: calc(100vh - 210px); overflow:auto;}
  .composer, .dmComposer{position:sticky; bottom:0; background:rgba(0,0,0,.35); backdrop-filter: blur(6px);}
  .modal .box{max-height: 92vh; overflow:auto;}
}

/* Admin camera quick buttons */
.admin-cam-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  color:var(--text);
  cursor:pointer;
}
.admin-cam-btn svg{width:18px;height:18px;}

/* =====================
   Activity ticker (thin marquee)
   ===================== */
#marqueeBar{
  position: sticky;
  top: 0;
  z-index: 9999;
  height: 20px;
  line-height: 20px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
#marqueeInner{
  width: 100%;
  white-space: nowrap;
}
#marqueeInner span{
  display: inline-block;
  padding-left: 100%;
  animation: makameMarquee 18s linear infinite;
  font-size: clamp(12px, 3.2vw, 16px);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;

  opacity: .95;
}
@keyframes makameMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* === Theme overrides: blue panels for Auth + DM (better readability) === */
#modalAuth .auth-card{
  background: rgba(10,18,58,.88) !important;
  border: 1px solid rgba(120,170,255,.22) !important;
}
#modalAuth .auth-right{
  background: rgba(60,120,255,.10) !important;
}
#modalAuth h2, #modalAuth h3, #modalAuth p, #modalAuth label, #modalAuth a{
  color: rgba(245,250,255,1) !important;
}
#modalAuth .auth-form .inp span{
  color: rgba(235,245,255,.92) !important;
  opacity: 1 !important;
}
#modalAuth input, #modalAuth select{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(160,200,255,.18) !important;
  color: rgba(245,250,255,1) !important;
}
#modalAuth .auth-right .x{
  background: rgba(20,40,120,.55) !important;
  border: 1px solid rgba(160,200,255,.25) !important;
  color: #fff !important;
}
#modalAuth .auth-form .btn.primary{
  background: linear-gradient(135deg, rgba(30,140,255,.95), rgba(70,80,255,.95)) !important;
  color: #fff !important;
}

/* DM (view-dm) panels */
#view-dm .card{
  background: rgba(10,18,58,.55) !important;
  border: 1px solid rgba(120,170,255,.18) !important;
}
#view-dm #dmFeed, #view-dm #dmThreads{
  color: rgba(245,250,255,1) !important;
}
#view-dm input, #view-dm textarea{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(160,200,255,.18) !important;
  color: rgba(245,250,255,1) !important;
}
#view-dm .ghost{
  border-color: rgba(160,200,255,.22) !important;
  color: rgba(245,250,255,1) !important;
}

@media (max-width: 560px){
  #modalAuth .auth-card{min-height:auto !important; width: min(94vw, 520px) !important; max-height: 92vh !important;}
  #modalAuth .auth-left{display:none !important;}
  #modalAuth .auth-right{padding:18px 16px !important;}
  #modalAuth .auth-form{gap:10px !important;}
}

/* === FORCE BLUE AUTH MODAL (override legacy white rules) === */
#modalAuth{ background: rgba(0,0,0,.72) !important; }
#modalAuth .auth-card{ 
  background: rgba(10,18,58,.88) !important;
  border: 1px solid rgba(120,170,255,.22) !important;
}
#modalAuth .auth-right h2,
#modalAuth .auth-right h3,
#modalAuth .auth-right p,
#modalAuth .auth-right label,
#modalAuth .auth-right a{ color: rgba(245,250,255,1) !important; }
#modalAuth .auth-form .inp span{ color: rgba(245,250,255,.78) !important; }
#modalAuth input, #modalAuth select{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(160,200,255,.18) !important;
  color: rgba(245,250,255,1) !important;
}
#modalAuth input::placeholder{ color: rgba(245,250,255,.55) !important; }
#modalAuth .auth-social .btn.ghost,
#modalAuth .googlebtn{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(245,250,255,1) !important;
}
#modalAuth .auth-right .x{ background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.18) !important; color:#fff !important; }

/* === FINAL OVERRIDE: BLUE AUTH MODAL (user request) === */
#modalAuth{ background: rgba(0,0,0,.70) !important; }
#modalAuth .overlay{ background: rgba(0,0,0,.70) !important; }
#modalAuth .auth-card{
  background: rgba(10,18,58,.88) !important;
  border: 1px solid rgba(120,170,255,.22) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.45) !important;
}
#modalAuth .auth-right{ background: transparent !important; }
#modalAuth h1, #modalAuth h2, #modalAuth h3,
#modalAuth p, #modalAuth label, #modalAuth a,
#modalAuth .muted{ color: rgba(245,250,255,.96) !important; }
#modalAuth .auth-form .inp span{ color: rgba(245,250,255,.82) !important; }
#modalAuth input, #modalAuth select{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(160,200,255,.22) !important;
  color: rgba(245,250,255,1) !important;
}
#modalAuth input::placeholder{ color: rgba(245,250,255,.55) !important; }
#modalAuth .auth-social .btn.ghost,
#modalAuth .googlebtn{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(160,200,255,.22) !important;
  color: rgba(245,250,255,1) !important;
}
#modalAuth .auth-right .x{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(160,200,255,.22) !important;
  color: rgba(245,250,255,1) !important;
}


/* === vNEXT: Premium blue glass UI for Auth + DM (high readability) === */
:root{
  --blueGlass1: rgba(18, 92, 220, .55);
  --blueGlass2: rgba(6, 26, 80, .66);
  --blueBorder: rgba(170, 210, 255, .22);
  --blueText: rgba(255,255,255,.96);
  --blueMuted: rgba(255,255,255,.74);
  --blueInput: rgba(2, 12, 35, .50);
  --blueInputBorder: rgba(200, 230, 255, .18);
}

#modalAuth .auth-card{
  background: linear-gradient(180deg, var(--blueGlass1), var(--blueGlass2)) !important;
  border: 1px solid var(--blueBorder) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
}
#modalAuth .auth-right h2,
#modalAuth .auth-brand .name,
#modalAuth .auth-card h1,
#modalAuth .auth-card h2{
  color: var(--blueText) !important;
}
#modalAuth .auth-card .muted,
#modalAuth .auth-card label,
#modalAuth .auth-form .inp span{
  color: var(--blueMuted) !important;
}
#modalAuth .auth-right .x{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--blueText) !important;
}
#modalAuth .auth-form .inp input,
#modalAuth .auth-form .inp select{
  background: var(--blueInput) !important;
  border: 1px solid var(--blueInputBorder) !important;
  color: var(--blueText) !important;
}
#modalAuth .auth-form .inp input::placeholder{
  color: rgba(255,255,255,.55) !important;
}
#modalAuth .auth-social .btn.ghost{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: var(--blueText) !important;
}
#modalAuth .auth-form .link,
#modalAuth .auth-switch .link{
  color: rgba(230,245,255,.92) !important;
}

#view-dm .card,
#dmMobileOverlay .card.dm-mobile-card,
#modalUserCard .card,
#view-friends .card{
  background: linear-gradient(180deg, rgba(12, 60, 160, .36), rgba(4, 16, 48, .52)) !important;
  border: 1px solid rgba(170, 210, 255, .18) !important;
  color: var(--blueText) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#view-dm .card header b,
#view-dm #dmWithName,
#dmMobileOverlay header b{
  color: var(--blueText) !important;
}

#view-dm input,
#view-dm textarea{
  background: rgba(2,12,35,.45) !important;
  border: 1px solid rgba(200,230,255,.16) !important;
  color: var(--blueText) !important;
}
#view-dm input::placeholder{ color: rgba(255,255,255,.55) !important; }

.ghost.x, .iconbtn, .ghost{ touch-action: manipulation; }

/* Ensure modal close/back buttons are always clickable */
.modal header .ghost.x,
.modal header .iconbtn,
#dmBackMobile{
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

/* Notification prompt (shown after cookie consent with explicit button) */
#notifPrompt{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483646;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
}
#notifPrompt .np-card{
  width: min(520px, 100%);
  border-radius: 18px;
  padding: 16px 16px 14px;
  background: rgba(12,24,48,.92);
  border: 1px solid rgba(110,190,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
}
#notifPrompt .np-title{ font-weight: 800; font-size: 16px; margin-bottom: 6px; }
#notifPrompt .np-text{ font-size: 13px; opacity: .85; margin-bottom: 12px; }
#notifPrompt .np-actions{ display: flex; gap: 10px; justify-content: flex-end; }
#notifPrompt .np-actions button{ border-radius: 12px; padding: 10px 12px; }

/* Non-blocking notifications banner (Wave #1) */
#mkNotifBanner{
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 2147483646;
  display: flex;
  justify-content: center;
  padding: 10px 12px;
  pointer-events: none; /* only the card should receive clicks */
}
#mkNotifBanner[hidden]{ display:none !important; }
#mkNotifBanner .mk-notif-card{
  pointer-events: auto;
  width: min(640px, calc(100vw - 24px));
  border-radius: 18px;
  padding: 12px 12px 10px;
  background: rgba(12,24,48,.94);
  border: 1px solid rgba(110,190,255,.18);
  box-shadow: 0 18px 70px rgba(0,0,0,.40);
  color: rgba(255,255,255,.92);
}
#mkNotifBanner .mk-notif-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 6px; }
#mkNotifBanner .mk-notif-text{ font-size: 13px; opacity: .86; line-height: 1.35; }
#mkNotifBanner .mk-notif-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 10px; flex-wrap:wrap; }
#mkNotifBanner .mk-notif-actions button{ border-radius: 12px; padding: 9px 12px; min-height: 40px; }

/* Welcome CTA attention after language selected */
@keyframes mkCtaPulse{
  0%, 100%{ transform: translateZ(0) scale(1); filter: brightness(1); }
  50%{ transform: translateZ(0) scale(1.03); filter: brightness(1.08); }
}
.mk-cta-pulse{
  animation: mkCtaPulse 1.05s ease-in-out infinite;
}


/* v6 modal auth scroll fix */
#modalAuth .modal-card{max-height:92vh; overflow:auto; padding-bottom:24px;}
#modalAuth .modal-card::-webkit-scrollbar{width:10px;}
#modalAuth .modal-card .row{flex-wrap:wrap;}
#modalAuth input, #modalAuth select{min-height:44px;}
#modalAuth .btn{min-height:44px;}
/* DM left list should stay visible */
#view-dm .dm-layout{display:grid;grid-template-columns: minmax(240px, 320px) 1fr;gap:12px;}
@media (max-width: 900px){#view-dm .dm-layout{grid-template-columns:1fr;}}

/* ==============================
   UI hardening overrides (Auth + header + composer)
   Appended last to win conflicts.
   ============================== */

/* --- Auth modal: compact, no internal scroll by default --- */
#modalAuth .modal-card.auth-card{
  width: min(94vw, 520px) !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}
#modalAuth .modal-card.auth-card,
#modalAuth .modal-card.auth-card h2,
#modalAuth .modal-card.auth-card label,
#modalAuth .modal-card.auth-card .lbl,
#modalAuth .modal-card.auth-card .auth-row,
#modalAuth .modal-card.auth-card .auth-row span,
#modalAuth .modal-card.auth-card .chk span{
  color: rgba(255,255,255,.95) !important;
}
#modalAuth .modal-card.auth-card input{
  color: #07121f !important;
}
#modalAuth .auth-right{ padding: 14px !important; }
#modalAuth .auth-brand .tag{ display:none; }
@media (max-height: 740px){
  #modalAuth .auth-brand{ display:none; }
  #modalAuth .auth-row .hint{ display:none; }
  #modalAuth .auth-row{ gap: 6px; }
}

/* Round Google icon button */
.google-icon-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 12px;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.google-icon-btn .g{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}
.google-icon-btn svg{ width: 22px; height: 22px; display:block; }
.google-icon-btn .txt{ font-weight: 700; letter-spacing:.2px; }
.google-icon-btn .txt .g1{ color:#4285F4; }
.google-icon-btn .txt .g2{ color:#EA4335; }
.google-icon-btn .txt .g3{ color:#FBBC05; }
.google-icon-btn .txt .g4{ color:#4285F4; }
.google-icon-btn .txt .g5{ color:#34A853; }
.google-icon-btn .txt .g6{ color:#EA4335; }
.google-icon-btn:active{ transform: translateY(1px); }

/* --- Topbar: more compact + allow icons to fit --- */
.topbar{
  padding: 8px 10px !important;
  gap: 6px !important;
}
.topbar .right{ gap: 6px !important; }
.topbar .iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

/* --- Pinned composers: keep input always visible (mobile) --- */
@media (max-width: 720px){
  #view-chat .composer,
  #view-dm .composer{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 50 !important;
  }
  #view-chat .feed-rel,
  #view-dm .feed-rel{ padding-bottom: 88px !important; }
}



/* Admin-only nav (fix: avoid inline display:none bugs) */
.adm-only{ display:none !important; }
body.is-admin .adm-only,
body.is-mod .adm-only{ display:flex !important; }

/* Topbar compact: keep icons in one row */
#topbar .top-actions{ gap:10px; }

/* DM/chat composer pinned */
.dm-modal .composer,
.dm-modal .dm-composer,
#dmComposer{
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.dm-modal .dm-head,
#dmHeader{
  position: sticky;
  top: 0;
  z-index: 11;
}

/* Auth modal fit screen (no page scroll) */
.modal-card.auth-card{
  max-height: 92vh;
  overflow: hidden;
}
.modal-card.auth-card .modal-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   FINAL UX FIXES (readability + compact header)
   Keep at the bottom to override legacy duplicates.
   ========================================================= */

/* Auth modal: improve contrast for buttons + links */
#modalAuth .btn, #modalAuth button.btn{
  font-weight: 800 !important;
}
#modalAuth .btn.ghost{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: rgba(255,255,255,.96) !important;
}
#modalAuth .btn.link{
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.94) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-align: center !important;
}
#modalAuth .btn[disabled], #modalAuth button[disabled]{
  opacity: .75 !important;
  filter: saturate(.9) !important;
}
#modalAuth input::placeholder{
  color: rgba(255,255,255,.70) !important;
}

/* Make the top header more compact */
.topbar{ padding: 8px 10px !important; gap: 6px !important; }
.topbar .iconbtn{ width: 40px !important; height: 40px !important; }
.topbar .row{ gap: 6px !important; }

/* Remove camera buttons from header (move these to admin menu later) */
#wallCamWrap{ display:none !important; }

/* =========================
   Auth modal text: force black (requested)
   Keep existing theme/background, only change lettering.
========================= */
#modalAuth, #modalAuth *{
  color: rgba(0,0,0,.92) !important;
}
#modalAuth input{ color: rgba(0,0,0,.92) !important; }
#modalAuth input::placeholder{ color: rgba(0,0,0,.55) !important; }
#modalAuth .btn,
#modalAuth .btn.ghost,
#modalAuth .btn.link{
  color: rgba(0,0,0,.92) !important;
}

/* ===== Requested: lighter overlay + neon buttons + correct LS avatars ===== */

/* Make overlay slightly brighter so black text is readable */
.modal{
  background: rgba(135, 206, 250, .22) !important;
}

/* Neon glow for buttons (keep current colors, add glow) */
button,
.btn,
.btn2,
.btn3,
.drawer-btn,
.chip,
.pill{
  box-shadow: 0 0 10px rgba(0, 255, 255, .25), 0 0 20px rgba(0, 136, 255, .18);
  border-color: rgba(0, 255, 255, .25) !important;
}
button:hover,
.btn:hover,
.btn2:hover,
.btn3:hover,
.drawer-btn:hover,
.chip:hover,
.pill:hover{
  box-shadow: 0 0 14px rgba(0, 255, 255, .32), 0 0 28px rgba(0, 136, 255, .22);
}

/* LS/DM avatar sizing (default avatar was invisible because no sizing rules existed) */
#dmThreads .ava,
#dmHistory .ava{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 44px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

/* Ensure DM thread rows align nicely */
#dmThreads .thread{ align-items:center; }



/* ====== UI finish v4 overrides ====== */
/* Auth: lighter overlay + readable labels */
#modalAuth .overlay{ background: rgba(90,160,255,.28) !important; }
#modalAuth label,
#modalAuth .auth-brand .name,
#modalAuth .auth-brand .tag,
#modalAuth .auth-fields .lbl,
#modalAuth .auth-fields .hint,
#modalAuth .auth-actions,
#modalAuth .rowRemember,
#modalAuth .rowRemember span{ color: rgba(255,255,255,.94) !important; }

/* Auth: small CZ flag square (like in preloader) */
#modalAuth .auth-brand{ position: relative; padding-left: 18px; }
#modalAuth .czflag{
  width: 14px; height: 14px; border-radius: 4px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 18px rgba(0,180,255,.35);
  background:
    linear-gradient(135deg, #1f4fb2 0 50%, transparent 50% 100%),
    linear-gradient(#ffffff 0 50%, #d52b1e 50% 100%);
  margin-right: 6px;
}

/* Google word colors */
#modalAuth .gword{ font-weight: 800; letter-spacing: .2px; }
#modalAuth .g1{ color:#4285F4; }
#modalAuth .g2{ color:#EA4335; }
#modalAuth .g3{ color:#FBBC05; }
#modalAuth .g4{ color:#4285F4; }
#modalAuth .g5{ color:#34A853; }
#modalAuth .g6{ color:#EA4335; }

/* DM avatars: force visible */
#dmThreads .ava img,
#dmHistory .ava img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }

/* ===== AUTH MODAL VISIBILITY (fix labels + Google button) ===== */
.authModal .authTitle,
.authModal .authTitle2,
.authModal label,
.authModal .muted,
.authModal .authHint,
.authModal .authAlt,
.authModal .small,
.authModal .authRow,
.authModal .authRow *{ color: #fff; }

.authModal .google-icon-btn{ background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.28); }
.authModal .google-icon-btn .txt{ color:#fff; font-weight:800; letter-spacing:.2px; }
.authModal .google-icon-btn:hover{ background: rgba(0,0,0,.48); }

#modalAuth{
  background: url("../img/auth_prague.jpg") center/cover no-repeat fixed;
}
#modalAuth::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,.15), rgba(0,0,0,.65)),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75));
  pointer-events:none;
}
#modalAuth > *{ position: relative; z-index: 1; }

/* Mobile: full-screen auth (like reference) */
@media (max-width: 520px){
  .modalOverlay{ padding: 14px; }
  .authModal{ width: 100%; max-width: 420px; min-height: unset; border-radius: 24px; }
  .authModal{ background: rgba(10,40,90,.62); backdrop-filter: blur(14px); }
  .authModal .authHeader{ padding: 16px 16px 10px; }
  .authModal .authTitle{ font-size: 22px; }
  .authModal .authBody{ padding: 10px 16px 16px; }
  .authModal input{ font-size: 16px; }
}

/* ===== Auth (mobile full-page like reference) ===== */
#modalAuth{
  background: url("../img/auth_prague.jpg") center/cover no-repeat fixed;
}
#modalAuth::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(20,120,255,.18), rgba(0,0,0,.70)),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.78));
  pointer-events: none;
}
#modalAuth .authModal{ position: relative; z-index: 1; }

/* Make labels readable */
.authModal .inp span,
.authModal h2,
.authModal .auth-brand span,
.authModal .small,
.authModal label{ color: rgba(255,255,255,.92); }

/* Google button text like Google logo */
.google-icon-btn .txt{ color:#fff; font-weight: 800; }
.google-icon-btn .txt span:nth-child(1){ color:#4285F4; }
.google-icon-btn .txt span:nth-child(2){ color:#EA4335; }
.google-icon-btn .txt span:nth-child(3){ color:#FBBC05; }
.google-icon-btn .txt span:nth-child(4){ color:#4285F4; }
.google-icon-btn .txt span:nth-child(5){ color:#34A853; }
.google-icon-btn .txt span:nth-child(6){ color:#EA4335; }

/* Hero typing line */
#authHeroLine{
  margin: 10px 0 14px;
  min-height: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
#authHeroLine .cursor{
  display:inline-block;
  width: 10px;
  transform: translateY(1px);
  animation: blink 1s steps(2,end) infinite;
}
@keyframes blink{ 50%{opacity:0;} }

@media (max-width: 680px){
  /* turn modal into full-page auth */
  #modalAuth{ align-items: stretch; }
  #modalAuth .authModal{
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    background: rgba(8,18,40,.35);
    backdrop-filter: blur(10px);
  }
  #modalAuth .auth-left{ display:none; }
  #modalAuth .auth-right{ padding: 18px 18px 20px; }
  #modalAuth .auth-actions{ margin-top: 10px; }
  #modalAuth .auth-actions button{ height: 52px; }
}

/* ===== Auth (full-page background + hero typing) ===== */
#modalAuth{
  background: url("../img/auth_prague.jpg") center/cover no-repeat fixed;
}
#modalAuth::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(20,120,255,.18), rgba(0,0,0,.70)),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.78));
  pointer-events: none;
}
#modalAuth .authModal{ position: relative; z-index: 2; }

#modalAuth .auth-hero{
  margin: 0 0 8px;
}
#modalAuth .auth-heroTitle{
  font-weight: 900;
  letter-spacing: .5px;
  margin: 0 0 4px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
#modalAuth .auth-heroLine{
  min-height: 28px;
  line-height: 1.05;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#modalAuth .auth-heroLine .cursor{
  color: #35ff7a;
  display: inline-block;
  width: 8px;
  margin-left: 2px;
  animation: blink 1s steps(2,end) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Make key labels readable */
#modalAuth .auth-right .inp > span,
#modalAuth .auth-right h2,
#modalAuth .auth-right label{
  color: rgba(255,255,255,.94) !important;
}

/* Google button text: keep visible */
#modalAuth .google-icon-btn .txt{ color: rgba(255,255,255,.95); font-weight: 800; }

/* Desktop: keep modal feel */
@media (min-width: 900px){
  #modalAuth{ background-attachment: fixed; }
}

/* ===== Auth (full-page background + mobile layout like reference) ===== */
#modalAuth{
  background: url("../img/auth_prague.jpg") center/cover no-repeat fixed;
}
#modalAuth::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(20,120,255,.22), rgba(0,0,0,.68)),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.78));
  pointer-events: none;
}

#modalAuth .auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 6px 0 10px;
}
#modalAuth .auth-brand img{ width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#modalAuth .auth-brand .brand-title{ font-weight: 900; letter-spacing:.4px; }

#modalAuth .auth-hero{
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
#modalAuth .auth-hero .hero-line{
  font-weight: 800;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}
#modalAuth .auth-hero .hero-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

@media (max-width: 720px){
  #modalAuth{ padding: 0; }
  #modalAuth .authModal{
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
  }
  #modalAuth .auth-card{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    grid-template-columns: 1fr;
    background: transparent;
  }
  #modalAuth .auth-left{ display:none; }
  #modalAuth .auth-right{
    background: rgba(0,0,0,.26);
    backdrop-filter: blur(14px);
    padding: 16px 16px 18px;
  }
  #modalAuth .auth-right .inp input{ background: rgba(0,0,0,.24) !important; }
  #modalAuth .auth-right .auth-actions{ gap: 10px; }
}

.auth-heroLine{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.3;
  min-height: 38px;
}
.auth-heroLine .cursor{
  display: inline-block;
  width: 8px;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50% { opacity: 0; } }

/* ==============================
   AUTH MODAL – FINAL OVERRIDES
   Goal: always readable, always fits (desktop + mobile + small screens)
   ============================== */

#modalAuth{ background: rgba(0,0,0,.72) !important; }

#modalAuth .auth-card{
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(69,160,255,.35), rgba(0,0,0,0) 55%),
              linear-gradient(180deg, rgba(6,18,40,.92), rgba(6,18,40,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

#modalAuth .auth-left{ background: url('../img/auth_prague.jpg') center/cover no-repeat; }
#modalAuth .auth-left:after{ background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(6,18,40,.85)); }

#modalAuth .auth-right{ position: relative; color: rgba(255,255,255,.95); padding: 18px 18px; }
#modalAuth .auth-right h2{ color: rgba(255,255,255,.98) !important; margin: 6px 0 10px 0; font-size: clamp(18px, 2.2vw, 26px); }
#modalAuth .auth-brand .name{ color: rgba(255,255,255,.98) !important; }
#modalAuth .auth-brand .tag{ color: rgba(255,255,255,.78) !important; }

#modalAuth .auth-heroLine{ margin: 8px 0 12px 0; text-align: center; }
#modalAuth .auth-heroLine .txt{ color: rgba(255,255,255,.92) !important; font-size: clamp(13px, 1.8vw, 18px); }
#modalAuth .auth-heroLine .cursor{
  color: #35ff7a; color: #35ff7a !important; }

#modalAuth .auth-form{ display:flex; flex-direction:column; gap: 10px; }

#modalAuth .inp span{ color: rgba(255,255,255,.85) !important; opacity: 1 !important; }
#modalAuth .inp input,
#modalAuth .inp select{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.96);
  outline: none;
}
#modalAuth .inp input::placeholder{ color: rgba(255,255,255,.62) !important; }

#modalAuth .auth-row{ display:flex; flex-wrap:wrap; gap: 10px; align-items:center; justify-content:space-between; }
#modalAuth .chk span{ color: rgba(255,255,255,.85); }

#modalAuth .btn.primary{
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(90deg, rgba(66,148,255,.95), rgba(117,84,255,.95));
  color: rgba(255,255,255,.98);
  font-weight: 900;
  letter-spacing: .6px;
}

#modalAuth .sep span{ color: rgba(255,255,255,.70); }

#modalAuth .google-icon-btn{
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

#modalAuth .auth-switch .link,
#modalAuth .auth-form .link,
#modalAuth a{ color: rgba(255,255,255,.90) !important; }
#modalAuth .auth-form .link{ opacity: .92; }

#modalAuth .auth-right .x{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.95);
}

/* Mobile + small screens: collapse left panel, tighten paddings so everything fits */
@media (max-width: 560px){
  #modalAuth .auth-card{ flex-direction: column; }
  #modalAuth .auth-left{ width:100%; height: 150px; }
  #modalAuth .auth-right{ width:100%; padding: 14px 14px; }
}

@media (max-width: 360px), (max-height: 640px){
  #modalAuth .auth-left{ height: 118px; }
  #modalAuth .inp input, #modalAuth .inp select,
  #modalAuth .btn.primary, #modalAuth .google-icon-btn{ height: 44px; border-radius: 14px; }
  #modalAuth .auth-brand .name{ font-size: 20px; }
  #modalAuth .auth-brand img{ width: 44px; height: 44px; }
  #modalAuth .auth-row{ gap: 8px; }
  #modalAuth .hint.warn{ display:none; }
}


/* === AUTH V2 GLASS (dribbble-like) === */

#modalAuth .auth-card{
  width: min(92vw, 860px);
  max-height: calc(100vh - 24px);
  min-height: 0;
  background: rgba(8, 18, 34, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 120px rgba(0,0,0,0.55);
}
#modalAuth .auth-left{
  width: 44%;
  background-image: var(--authwall);
  filter: saturate(1.05) contrast(1.05);
}
#modalAuth .auth-left:after{
  background: linear-gradient(120deg, rgba(0,0,0,0.60), rgba(0,0,0,0.25));
}
#modalAuth .auth-right{
  width: 56%;
  padding: 18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
#modalAuth .auth-brand .name,
#modalAuth .auth-brand .tag,
#modalAuth h2,
#modalAuth label,
#modalAuth .inp span,
#modalAuth .auth-remember,
#modalAuth .auth-or,
#modalAuth .auth-heroLine{
  color:#fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
#modalAuth .auth-heroLine{
  font-size: 16px;
  line-height: 1.2;
  min-height: 22px;
  margin: 2px 0 4px;
  opacity: 0.95;
}
#modalAuth .auth-heroLine .cursor{
  color: #35ff7a; opacity: .8; }
#modalAuth .auth-form{
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow:auto;
}
#modalAuth .auth-form input{
  height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff;
}
#modalAuth .auth-form input::placeholder{ color: rgba(255,255,255,0.60); }
#modalAuth .btn, #modalAuth button{
  border-radius: 16px;
}
#modalAuth .btn-auth-google{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff;
}
#modalAuth .btn-auth-google:hover{ background: rgba(255,255,255,0.16); }
#modalAuth .auth-actions{ display:flex; flex-direction:column; gap: 10px; }
#modalAuth .auth-actions .btn{ height:48px; }
#modalAuth .auth-links{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
#modalAuth .auth-links a, #modalAuth .auth-links button{
  color: rgba(255,255,255,0.85) !important;
}
@media (max-width: 720px){
  #modalAuth .auth-card{ width: min(92vw, 440px); }
  #modalAuth .auth-left{ display:none; }
  #modalAuth .auth-right{ width:100%; }
}
@media (max-height: 640px){
  #modalAuth .auth-card{ max-height: calc(100vh - 16px); }
  #modalAuth .auth-right{ padding: 14px 14px 12px; }
  #modalAuth .auth-form input, #modalAuth .auth-actions .btn{ height: 44px; border-radius: 14px; }
  #modalAuth .auth-brand img{ height: 44px; width: 44px; }
}
@media (max-width: 360px){
  #modalAuth .auth-card{ width: calc(100vw - 16px); }
  #modalAuth .auth-links{ flex-direction:column; align-items:stretch; }
}



/* === AUTH v4 (Prague wallpaper + Dribbble-like blue glass) === */
:root{
  --authwall: url("../img/auth-prague.jpg");
  --authBlue1: rgba(10, 40, 120, .92);
  --authBlue2: rgba(9, 20, 55, .78);
}
#modalAuth{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 9999;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(0,190,255,.10), transparent 55%),
    radial-gradient(900px 700px at 90% 90%, rgba(120,60,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    var(--authwall) center/cover no-repeat;
  backdrop-filter: blur(3px);
}
#modalAuth[hidden]{ display:none !important; }

#modalAuth .auth-card{
  width: min(440px, calc(100vw - 20px));
  max-height: min(720px, calc(100vh - 20px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  background: linear-gradient(180deg, var(--authBlue1), var(--authBlue2));
}
#modalAuth .auth-left{ display:none !important; }
#modalAuth .auth-right{
  width: 100%;
  display:flex;
  flex-direction:column;
  overflow: hidden;
  padding: 16px 16px 14px 16px;
}
#modalAuth .auth-brand .name{ color:#fff; letter-spacing:.5px; }
#modalAuth .auth-brand .tag{ color: rgba(255,255,255,.78); }
#modalAuth #authTitle{ color:#fff !important; margin: 10px 0 10px; font-weight: 800; }
#modalAuth .auth-heroLine{
  margin: 8px 0 6px;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  min-height: 22px;
  text-align:center;
}
#modalAuth .auth-heroLine .cursor{
  color: #35ff7a; opacity:.85; }

#modalAuth .auth-form{
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
#modalAuth .inp span{ color: rgba(255,255,255,.88) !important; }
#modalAuth input, #modalAuth select{
  height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
#modalAuth input::placeholder{ color: rgba(255,255,255,.65); }
#modalAuth .btn{
  height: 48px;
  border-radius: 16px;
  font-weight: 800;
}
#modalAuth .btn-primary{
  background: linear-gradient(90deg, rgba(0,160,255,.95), rgba(85,120,255,.95));
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
}
#modalAuth .btn-auth-google{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff !important;
}
#modalAuth .auth-or{ color: rgba(255,255,255,.75); }
#modalAuth .link{
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: underline;
  font-weight: 700;
  padding: 8px 6px;
}
#modalAuth .link:hover{ opacity:.9; }
#modalAuth .auth-switch{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
#modalAuth #authResetPass{ margin: 6px auto 2px; display:block; }

#modalAuth .x{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  cursor:pointer;
  pointer-events: auto;
}
#modalAuth .wallcam{ top: 12px; left: 12px; }

@media (max-width: 360px){
  #modalAuth{ padding: 10px; }
  #modalAuth .auth-card{ border-radius: 22px; }
  #modalAuth .auth-right{ padding: 12px 12px 10px; }
  #modalAuth input, #modalAuth select, #modalAuth .btn{ height: 44px; border-radius: 14px; }
  #modalAuth .auth-heroLine{ font-size: 14px; min-height: 20px; }
  #modalAuth .auth-brand .name{ font-size: 22px; }
}
@media (max-height: 680px){
  #modalAuth .auth-brand .tag{ display:none; }
  #modalAuth .auth-heroLine{ margin-top: 4px; }
}


/* --- AUTH: ultra-compact fit (no scroll) --- */

@media (max-width: 520px){
  .auth-card{ width: min(94vw, 440px); max-height: calc(100vh - 18px); }
  .auth-left{ display:none; }
  .auth-right{ width:100%; padding:16px 14px; }
  .auth-brand{ gap:8px; margin-bottom:10px; }
  .auth-brand img{ width:48px; height:48px; }
  .auth-brand .name{ font-size:22px; }
  .auth-brand .tag{ font-size:13px; }
  .auth-heroLine{ margin: 6px 0 8px; font-size:14px; }
  .auth-right h2{ font-size:20px; margin:6px 0 6px; }
  .auth-form .inp span{ margin-bottom:4px; }
  .auth-form .inp input,.auth-form .inp select{ padding:12px 12px; border-radius:14px; }
  .auth-form input{ height:44px; }
  .sep{ margin:10px 0; }
  .btn.primary, .btn{ height:46px; border-radius:16px; }
  .hint.warn{ display:none !important; } /* hide long spam hint on small screens */
}
@media (max-height: 700px){
  .auth-right{ padding:16px 14px; }
  .hint.warn{ display:none !important; }
  .auth-heroLine{ font-size:14px; }
}

/* Premium bot panel: keep plan buttons visible on mobile */
#botPremiumPanel{ padding:10px 10px; border-radius:16px; background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.08); }
#botPremiumActions{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 6px; }
#botPremiumActions .btn{ flex:1 1 150px; min-width:150px; }


/* --- AUTH: force fit on mobile (no vertical scroll) --- */
@media (max-width: 420px), (max-height: 740px){
  .auth-card{width:92vw; max-height: 88vh;}
  .auth-hero{display:none !important;}
  .auth-body{padding:16px 16px 14px 16px !important;}
  .auth-brand{margin-bottom:10px !important;}
  .auth-brand .logo{width:64px !important; height:64px !important;}
  .auth-brand .title{font-size:28px !important; line-height:1.05 !important;}
  .auth-brand .sub{font-size:13px !important; line-height:1.2 !important;}
  .auth-title{margin:10px 0 10px !important; font-size:20px !important;}
  .auth-form .inp{height:44px !important; border-radius:14px !important;}
  .auth-actions{gap:10px !important; margin-top:10px !important;}
  .auth-actions .btn{height:44px !important; border-radius:14px !important;}
  .auth-or{margin:10px 0 !important;}
  .auth-links{gap:10px !important; margin-top:10px !important;}
  .auth-links a{padding:10px 12px !important; font-size:14px !important;}
}
@media (max-height: 680px){
  /* hide extra tagline line on very small screens to keep everything visible */
  .auth-brand .sub{display:none !important;}
}


/* ===== v8 compact auth (no scroll) + consistent blue ===== */
html, body{ background:#0b3ea8; }

/* Make auth modal truly fit on small screens without scroll */
#modalAuth .modal-card.auth-card{ max-height: calc(100vh - 14px) !important; overflow: hidden !important; }
#modalAuth .auth-right{ padding: 14px 14px 12px !important; }
#modalAuth .auth-brand img{ width: 64px !important; height: 64px !important; border-radius: 16px !important; }
#modalAuth .auth-brand .name{ font-size: 30px !important; line-height: 1.05 !important; }
#modalAuth .auth-brand .tag{ display:none !important; }
#modalAuth .auth-heroLine{ margin: 6px 0 10px !important; }
#modalAuth .auth-form{ margin-top: 10px !important; }
#modalAuth .auth-form .inp{ margin-bottom: 10px !important; }
#modalAuth .btn.primary{ height: 46px !important; }
#modalAuth .auth-social.compact{ margin-top: 10px !important; }
#modalAuth .auth-social.compact .google-icon-btn{ width:100% !important; }

/* Ultra-small height phones: hide rotating line + tighten spacing */
@media (max-height: 780px){
  #modalAuth .auth-heroLine{ display:block !important; font-size: clamp(18px, 4.2vw, 28px) !important; min-height: 28px !important; }
  #modalAuth h2#authTitle{ margin: 6px 0 8px !important; }
  #modalAuth .auth-brand img{ width: 56px !important; height: 56px !important; }
  #modalAuth .auth-brand .name{ font-size: 26px !important; }
  #modalAuth .auth-form .inp span{ font-size: 12px !important; }
  #modalAuth .auth-form input, #modalAuth .auth-form select{ height: 42px !important; }
  #modalAuth .btn.primary{ height: 44px !important; }
  #modalAuth .auth-switch{ margin-top: 8px !important; }
  #modalAuth #authResetPass{ margin-top: 6px !important; }
  /* remove the spam warning note to save space */
  #modalAuth .hint.warn{ display:none !important; }
}

@media (max-height: 700px){
  #modalAuth .auth-brand img{ width: 50px !important; height: 50px !important; }
  #modalAuth .auth-brand .name{ font-size: 22px !important; }
  #modalAuth .btn.primary{ height: 42px !important; }
  #modalAuth .auth-form{ margin-top: 6px !important; }
}


/* v10: Auth must fit on any mobile without vertical scroll */
@media (max-width: 720px){
  #modalAuth .auth-left{display:none !important;}
  #modalAuth .auth-right{width:100% !important; padding:18px 16px !important;}
  #modalAuth .auth-brand{margin-bottom:10px !important; gap:8px !important;}
  #modalAuth .auth-brand img{width:56px !important; height:56px !important;}
  #modalAuth .auth-heroLine{min-height:34px !important; text-align:center;}
  #modalAuth .auth-form{gap:10px !important;}
  #modalAuth .auth-actions{gap:10px !important;}
  #modalAuth .auth-links{gap:10px !important;}
  #modalAuth .btn, #modalAuth button{min-height:46px;}
}
@media (max-height: 740px){
  #modalAuth .auth-right{padding:16px 14px !important;}
  #modalAuth .auth-heroLine{font-size:clamp(22px,4.2vw,34px) !important;}
  #modalAuth .auth-brand img{width:52px !important; height:52px !important;}
  #modalAuth .auth-links a{padding:10px 12px !important;}
}


/* ===== MK v10.1: Auth hero typewriter must be BIG + UPPERCASE on all phones ===== */
#modalAuth .auth-heroLine{ text-transform: uppercase !important; font-weight: 900 !important; letter-spacing: .08em !important; }
#modalAuth .auth-heroLine .txt{ font-size: inherit !important; color: rgba(255,255,255,.96) !important; }

/* =====================
   MK v11 – Auth modal fixed height + stable hero line (no layout jumps)
   ===================== */

/* Center auth card, prevent page scroll behind */
#modalAuth{display:flex;align-items:center;justify-content:center;}
body.auth-open{overflow:hidden;}

/* Fixed card height on desktop; internal scroll only */
#modalAuth .auth-card{
  width:min(92vw, 760px);
  height:620px;
  max-height:90vh;
  overflow:hidden;
  display:flex;
}

#modalAuth .auth-right{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Scroll only the form area */
#modalAuth .auth-form{
  flex:1;
  overflow:auto;
  padding-right:6px; /* space for inner scrollbar */
}

/* Reserve space for the big rotating line so inputs never move */
#modalAuth .auth-heroLine{
  min-height:96px;
  max-height:96px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
}
#modalAuth .auth-heroLine .txt{
  display:block;
  width:100%;
}

/* On short screens, keep height but reduce font slightly */
@media (max-height: 720px){
  #modalAuth .auth-card{height:600px;}
  #modalAuth .auth-heroLine{min-height:84px;max-height:84px;}
  #modalAuth .auth-heroLine{font-size:clamp(20px,3.8vw,34px);}
}
@media (max-height: 640px){
  #modalAuth .auth-card{height:560px;}
}

/* Mobile: still fixed; everything scrolls inside form only */
@media (max-width: 520px){
  #modalAuth .auth-card{width:min(92vw, 420px);height:620px;max-height:calc(100vh - 24px);}
  #modalAuth .auth-left{display:none;}
  #modalAuth .auth-right{width:100%;}
}


/* =========================
   v12 FIXES (Auth fullscreen + stable hero)
   ========================= */
.modal#modalAuth{
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}
.modal#modalAuth .auth-card{
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.modal#modalAuth .auth-page{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.modal#modalAuth .auth-hero{
  min-height: 96px !important; /* reserve space so inputs never jump */
  padding: 10px 18px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.modal#modalAuth .auth-hero .txt{
  font-size: clamp(20px, 3.6vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.modal#modalAuth .auth-hero .cursor{
  height: 44px !important;
}
.modal#modalAuth .auth-body{
  flex: 1 1 auto !important;
  overflow: hidden !important; /* NO SCROLL */
  display:flex !important;
  flex-direction: column !important;
  padding: 8px 18px 18px !important;
  gap: 10px !important;
}
@media (max-height: 720px){
  .modal#modalAuth .auth-hero{ min-height: 84px !important; }
  .modal#modalAuth .auth-hero .txt{ font-size: clamp(18px, 3.3vw, 34px) !important; }
  .modal#modalAuth .auth-body{ padding: 6px 14px 14px !important; gap: 8px !important; }
  .modal#modalAuth .auth-title{ margin: 6px 0 4px !important; }
  .modal#modalAuth .btn{ padding-top: 12px !important; padding-bottom: 12px !important; }
}


/* === Auth modal: stable mobile layout, logo moved to bottom === */
#modalAuth .auth-logoBottom{ display:flex; justify-content:center; margin-top:10px; padding-top:6px; opacity:.85; }
#modalAuth .auth-logoBottom img{ width:44px; height:44px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); }

@media (max-width: 720px){
  /* Use dynamic viewport units to avoid "jumping" when address bar shows/hides */
  #modalAuth .auth-card{ max-height: 92dvh !important; }
  #modalAuth .auth-right{ max-height: 92dvh !important; overflow:auto; -webkit-overflow-scrolling: touch; }
  /* Remove any remaining brand spacing at top */
  #modalAuth .auth-brand{ margin-bottom: 6px !important; }
}


/* === Onboarding tour (coach marks) === */
.mk-tour-highlight{
  outline:2px solid rgba(58,255,145,.75);
  outline-offset:4px;
  border-radius:12px;
  position:relative;
  z-index:999998;
}
.mk-tour-tooltip{
  position:fixed;
  z-index:999999;
  max-width:320px;
  background:rgba(22, 82, 200, .90);
  border:1px solid rgba(170, 220, 255, .35);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.mk-tour-tooltip .mk-tour-title{
  font-weight:700;
  margin:0 0 6px 0;
  font-size:14px;
}
.mk-tour-tooltip .mk-tour-text{
  font-size:13px;
  opacity:.92;
  margin:0 0 10px 0;
}
.mk-tour-tooltip .mk-tour-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.mk-tour-tooltip .mk-tour-actions button{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-weight:600;
}
.mk-tour-tooltip .mk-tour-actions button.primary{ border-color:rgba(58,255,145,.55); }
.mk-tour-tooltip .mk-tour-count{ font-size:11px; opacity:.75; margin-right:auto; }
.mk-tour-tooltip.arrow-top:before{
  content:'';
  position:absolute;
  top:-10px;
  left:var(--arrow-x,40px);
  transform:translateX(-50%);
  border-width:0 10px 10px 10px;
  border-style:solid;
  border-color:transparent transparent rgba(22, 82, 200, .90) transparent;
}
.mk-tour-tooltip.arrow-bottom:before{
  content:'';
  position:absolute;
  bottom:-10px;
  left:var(--arrow-x,40px);
  transform:translateX(-50%);
  border-width:10px 10px 0 10px;
  border-style:solid;
  border-color:rgba(22, 82, 200, .90) transparent transparent transparent;
}


/* === Admin panel collapsible cards === */
#view-admin .card header{ cursor:pointer; user-select:none; }
#view-admin .card header::after{ content:'▾'; margin-left:auto; opacity:.65; }
#view-admin .card.collapsed header::after{ content:'▸'; }
#view-admin .card.collapsed > :not(header){ display:none; }


/* Floating DM button (replaces user FAB). */
#fabDm{ display:none; }
.is-auth #fabDm{ display:flex; }
#fabDm{ font-size:24px; }
.is-admin #fabDm{ right:84px; } /* make room for admin + FAB */



/* Admin panel cards UX */
.admin-home{ margin-top:10px; }
.admin-tile{ width:100%; text-align:left; border:0; cursor:pointer; color: var(--text); }
.admin-tile:disabled{ opacity:.6; cursor:not-allowed; }
.admin-section{ margin-top:10px; }

/* === Admin/UI buttons: keep text readable on dark background === */
/* Some admin modal buttons were plain <button> without theme classes,
   so mobile Chrome rendered dark text which becomes unreadable. */
#view-admin button,
.modal:not(#modalAuth) button{
  color: var(--text);
}

#view-admin button:not(.card):not(.ghost):not(.tab):not(.btn):not(.btn2):not(.btn3):not(.drawer-btn):not(.chip):not(.pill),
.modal:not(#modalAuth) button:not(.card):not(.ghost):not(.tab):not(.btn):not(.btn2):not(.btn3):not(.drawer-btn):not(.chip):not(.pill){
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 8px 10px;
}

/* =======================
   v56 UI polish
   ======================= */

/* Topbar order + spacing (menu left, city, bell, profile right) */
.topbar .row{
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
}
.topbar .citysel{
  flex: 1 1 auto;
  min-width: 0;
}
.topbar .citysel select{ width: 100%; }

@media (max-width: 520px){
  .topbar{ flex-wrap: nowrap !important; }
  .topbar .row{ width: 100%; }
}

/* Typing indicator (chat) */
.typing-indicator{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.typing-indicator::before{
  content: '…';
  opacity: .75;
  font-weight: 900;
}

/* Force readable text on all buttons/pills (fix black text regressions) */
button,
.btn,.btn2,.btn3,
.drawer-btn,.drawer-btn2,
.pill,.chip,.filebtn{
  color: var(--text);
}


/* === Near bar (who is nearby) === */
.near-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:6px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.18);overflow:auto;white-space:nowrap;}
.near-chip{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);}
.near-chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;}
.near-chip .nick{font-weight:700;font-size:12px;opacity:.95;}
.near-chip .dot{opacity:.6;font-size:12px;}
.near-close{margin-left:auto;}

/* Admin inline panels helpers */
.admin-inline-panel header{position:sticky;top:0;z-index:2;background:rgba(12,14,16,.45);backdrop-filter: blur(10px);padding-top:6px;}

/* Admin panels: behave like proper "windows" on mobile */
body.admin-panel-open{ overflow:hidden; }
@media (max-width: 720px){
  .admin-inline-panel{
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: auto;
    padding: 12px 12px 24px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(10px);
  }
  .admin-inline-panel > .panel,
  .admin-inline-panel > .card,
  .admin-inline-panel > div{
    max-width: 100%;
  }
}

/* === Limits battery indicator (Profile) === */
.limit-battery{ margin-top:8px; display:flex; align-items:center; gap:8px; }
.battery{ position:relative; flex:1; height:14px; border:1px solid rgba(255,255,255,.35); border-radius:4px; overflow:hidden; background:rgba(255,255,255,.06); }
.battery::after{ content:''; position:absolute; right:-5px; top:3px; width:4px; height:8px; border:1px solid rgba(255,255,255,.35); border-left:0; border-radius:0 2px 2px 0; background:rgba(255,255,255,.06); }
.battery-fill{ height:100%; width:0%; background:#22c55e; transition:width .25s ease; }
.battery-pct{ min-width:46px; text-align:right; font-size:12px; opacity:0.85; }


/* =======================================================================
   NEON PURPLE UI (Admin buttons + pills)
   ======================================================================= */

.btn-purple,
#view-admin .admin-nav-btn,
#view-admin button.ghost:not(.x),
#view-admin button:not(.ghost):not(.danger):not(.iconbtn):not(.btn):not(.pill){
  background: linear-gradient(180deg, rgba(170,90,255,.95), rgba(110,0,255,.85));
  border: 1px solid rgba(210,170,255,.65);
  color: #fff;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .15px;
  text-shadow: 0 0 10px rgba(255,255,255,.18);
  box-shadow:
    0 0 18px rgba(170,90,255,.32),
    inset 0 0 12px rgba(0,0,0,.22);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-purple:hover,
#view-admin .admin-nav-btn:hover,
#view-admin button.ghost:not(.x):hover,
#view-admin button:not(.ghost):not(.danger):not(.iconbtn):not(.btn):not(.pill):hover{
  filter: brightness(1.06);
  box-shadow:
    0 0 24px rgba(190,120,255,.45),
    inset 0 0 12px rgba(0,0,0,.20);
}

.btn-purple:active,
#view-admin .admin-nav-btn:active,
#view-admin button.ghost:not(.x):active,
#view-admin button:not(.ghost):not(.danger):not(.iconbtn):not(.btn):not(.pill):active{
  transform: translateY(1px);
  filter: brightness(0.98);
}

#view-admin button.ghost.x{
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 900;
  line-height: 1;
}

/* Admin home navigation */
#view-admin .admin-nav-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 720px){
  #view-admin .admin-nav-grid{
    grid-template-columns: 1fr;
  }
}

#view-admin .admin-nav-btn{
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:flex-start;
}

#view-admin .admin-nav-title{
  font-size: 16px;
  line-height: 1.1;
}

#view-admin .admin-nav-sub{
  font-size: 12px;
  opacity: .85;
  font-weight: 600;
}

/* Purple pill used in DM request pseudo-message */
.pill-purple{
  background: rgba(170,90,255,.18);
  border: 1px solid rgba(210,170,255,.55);
  color: #fff;
}

/* Ensure admin section spacing is tidy */
#view-admin .admin-section > .row:first-child{
  gap: 10px;
}

/* Admin: prevent horizontal scroll on mobile */
#view-admin{ overflow-x:hidden; }
#view-admin .row{ flex-wrap:wrap; }
#view-admin input, #view-admin select, #view-admin textarea{ max-width:100%; }
@media (max-width: 720px){
  #view-admin .grid2{ grid-template-columns: 1fr !important; }
  #view-admin .feed{ max-width:100%; }
}

/* Bell notifications: person strip + actions */
.notif-person{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.notif-name{
  flex: 1;
  font-weight: 800;
  font-size: 13px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}


/* ===== MAKÁME: Welcome + VIP overlays ===== */
.modal.mk-overlay{
  background: rgba(0,0,0,.68) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px;
  z-index: 120000; /* above everything */
}
.modal.mk-overlay .mk-card{
  width: min(680px, 94vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(12,14,16,.88);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  padding: 16px 16px 14px 16px;
}
.welcomeTop{display:flex;align-items:center;gap:10px}
.welcomeBrand{font-weight:900;letter-spacing:.04em}
.welcomeTag{margin-left:auto;font-size:12px;opacity:.8;border:1px solid rgba(255,255,255,.14);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06)}
.langFlags{display:flex;gap:10px;flex-wrap:wrap}
.langBtn{display:inline-flex;align-items:center;gap:10px}
.langBtn .flag{font-size:22px}
.welcomeHint{opacity:.9}
.vipCard h2{letter-spacing:.01em}

/* Welcome hero (image + typing line) */
.welcomeHero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  min-height: 140px;
}
.welcomeHeroBg{
  position:absolute;
  inset:0;
  background-image: url("../img/prague.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(0px);
  transform: scale(1.05);
  opacity: .55;
}
.welcomeHeroBg:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82));
}
.welcomeHeroInner{
  position: relative;
  z-index: 1;
  padding: 14px;
}
.welcomeLogo{
  width: 110px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.55));
}
.welcomeBrandLine{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.welcomeBrand{
  font-weight: 950;
  letter-spacing: .06em;
  font-size: 18px;
  text-transform: uppercase;
}
.welcomeTag{
  font-size: 12px;
  opacity: .85;
  border: 1px solid rgba(255,255,255,.16);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.welcomeTyping{
  margin-top: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  min-height: 22px;
}
.welcomeTyping .cursor{
  display:inline-block;
  margin-left: 2px;
  opacity: .9;
  animation: mkBlink 1s steps(1,end) infinite;
}
@keyframes mkBlink{ 50% { opacity: 0; } }
@keyframes mkFadeIn{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform: translateY(0);} }

.langBtn.selected{
  border-color: rgba(57,255,145,.65) !important;
  box-shadow: 0 0 0 3px rgba(57,255,145,.18), 0 0 24px rgba(57,255,145,.18);
  position: relative;
}
.langBtn.selected::after{
  content:'✔';
  position:absolute;
  right:10px;
  top:10px;
  font-size:14px;
  color: rgba(234,255,243,.95);
  text-shadow: 0 0 14px rgba(57,255,145,.55);
}
.neonBig{
  padding: 10px 14px !important;
  border-radius: 16px !important;
}

/* VIP congrats button */
.vipCard .neonBig{
  padding: 12px 16px !important;
  border-radius: 18px !important;
}



/* ===== Profile rewards (progress) ===== */
.mkProgress{
  height: 10px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.mkProgressFill{
  height: 100%;
  width: 0%;
  background: rgba(57,255,145,.85);
  border-radius: 999px;
  transition: width .25s ease;
}


/* Hide floating FABs in Admin view (they overlap mobile admin UI) */
body[data-view="view-admin"] #fabBtn,
body[data-view="view-admin"] #fabDm,
body[data-view="view-admin"] #fabMenu{ display:none !important; }

/* Also hide FABs via body class fallback (in case dataset isn't set for some reason) */
body.in-admin #fabBtn,
body.in-admin #fabDm,
body.in-admin #fabMenu{ display:none !important; }

/* Admin user card – mobile friendly */
#view-admin .admin-user-card{ position:relative; z-index:2; }
#view-admin .adminUserHead{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}
#view-admin .adminUserAvatar{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
}
#view-admin .adminUserMeta{ flex:1; min-width:220px; }
#view-admin .adminUserBadges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
#view-admin .badge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.30);
}
#view-admin .badge.badge-ok{ border-color: rgba(57,255,145,.35); background: rgba(57,255,145,.12); }
#view-admin .badge.badge-warn{ border-color: rgba(255,90,90,.35); background: rgba(255,90,90,.14); }
#view-admin .badge.badge-info{ border-color: rgba(90,180,255,.35); background: rgba(90,180,255,.12); }

#view-admin .adminUserGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media (max-width: 680px){
  #view-admin .adminUserGrid{ grid-template-columns: 1fr; }
}

#view-admin .adminUserBox{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px;
  background: rgba(0,0,0,0.18);
}

#view-admin .adminKV{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px;
  padding:6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
#view-admin .adminKV:last-child{ border-bottom:none; }
#view-admin .adminKVVal{ white-space:pre-wrap; word-break:break-word; opacity:0.95; }

#view-admin .adminBtnGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 520px){
  #view-admin .adminBtnGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
#view-admin .adminBtnGrid button{
  min-height:44px;
  touch-action: manipulation;
}
#view-admin details.adminDanger{ border-top: 1px solid rgba(255,255,255,0.08); padding-top:6px; }
#view-admin .dangerSummary{ cursor:pointer; user-select:none; padding:6px 0; }

/* Make sure admin view content isn't hidden behind bottom bar on mobile */
#view-admin{ padding-bottom: 120px; }


/* Admin badges */
.badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.02em; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25);}
.badge.ok{border-color:rgba(0,255,140,.35); background:rgba(0,255,140,.12);}
.badge.bad{border-color:rgba(255,80,80,.35); background:rgba(255,80,80,.12);}
.badge.warn{border-color:rgba(255,200,0,.35); background:rgba(255,200,0,.10);}


/* === PH Auth Modal (PráceHub.cz) ========================================== */
/* NOTE: #modalAuth uses the existing .modal + [hidden] mechanics.
   We only theme it; we do NOT toggle display via .is-open classes. */

.modal.ph-backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  z-index: 2147483645;
}

.ph-modal{
  width: min(520px, 96vw);
  border-radius: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 18px 16px;
  color: #eaeaea;
  background: linear-gradient(180deg, rgba(20,20,40,.92), rgba(12,12,24,.92));
  border: 2px solid rgba(212,175,55,.45);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

/* Scroll only the content area (keeps the close button visible on small screens) */
.ph-modal-body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ph-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}

.ph-head{ margin-bottom: 12px; }
.ph-title{
  font-weight: 800;
  font-size: 38px;
  letter-spacing: .5px;
  /* Fallback color for browsers/devices where gradient text isn't supported */
  color: #ffd37a;
}

/* Gradient title — enable only when the browser supports clipping */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ph-title{
    background: linear-gradient(90deg, #ffd37a, #d4af37, #ffe7a6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ph-sub{ opacity:.85; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.82); }

.ph-marquee{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.35);
  padding: 10px 12px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
}

/* Static pill (used instead of marquee) */
.ph-pill{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.45);
  padding: 10px 12px;
  text-align:center;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  background: rgba(10,12,20,.52);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 30px rgba(0,0,0,.35);
}
.ph-marquee-track{
  display:flex;
  gap: 40px;
  white-space: nowrap;
  animation: phMarquee 14s linear infinite;
}
@keyframes phMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-33.333%); }
}

.ph-status{
  min-height: 18px;
  margin: 10px 0 12px;
  font-size: 13px;
  opacity:.95;
}
.ph-status.ok{ color: #c7ffcf; }
.ph-status.err{ color: #ffd2d2; }

.ph-btn{
  width:100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
  font-weight: 700;
  font-size: 16px;
}

.ph-btn-google{
  background: rgba(255,255,255,.92);
  color:#111;
  border: 2px solid rgba(70,130,255,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  gap: 10px;
}
.ph-gicon{
  width: 28px; height: 28px;
  border-radius: 8px;
  display:inline-flex; align-items:center; justify-content:center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  font-weight:900;
}

.ph-sep{
  display:flex; align-items:center;
  gap: 10px;
  margin: 14px 0 10px;
  opacity: .9;
}
.ph-sep span{
  flex:1; height: 1px; background: rgba(255,255,255,.16);
}
.ph-sep b{ font-weight: 700; font-size: 13px; }

.ph-tabs{
  display:flex;
  gap: 8px;
  margin: 10px 0 10px;
}
.ph-tab{
  flex:1;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,175,55,.22);
  color:#eaeaea;
  cursor:pointer;
  font-weight:700;
}
.ph-tab.is-active{
  border-color: rgba(70,130,255,.55);
  box-shadow: 0 0 0 3px rgba(70,130,255,.15) inset;
}

.ph-form{ display:block; }
.ph-form.is-hidden{ display:none; }

.ph-field{
  display:block;
  margin: 10px 0;
}
.ph-field span{
  display:block;
  font-size: 13px;
  opacity:.9;
  margin-bottom: 6px;
}
.ph-field input{
  width:100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.25);
  background: rgba(255,255,255,.04);
  color: #fff;
  outline:none;
}
.ph-field input:focus{
  border-color: rgba(70,130,255,.65);
  box-shadow: 0 0 0 3px rgba(70,130,255,.18);
}

/* Input icons (email / password / nick) to match reference auth modal */
#loginEmail,
#loginPass,
#regNick,
#regEmail,
#regPass{
  padding-left: 48px !important;
  background-repeat: no-repeat;
  background-position: 16px 50%;
  background-size: 20px 20px;
}

#loginEmail,
#regEmail{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

#loginPass,
#regPass{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 17a2 2 0 0 0 2-2v-2a2 2 0 0 0-4 0v2a2 2 0 0 0 2 2zm6-7h-1V8a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-3 0H9V8a3 3 0 0 1 6 0v2z'/%3E%3C/svg%3E");
}

#regNick{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.33 0-8 2.17-8 5v1h16v-1c0-2.83-3.67-5-8-5z'/%3E%3C/svg%3E");
}

.ph-btn-primary{
  background: linear-gradient(180deg, rgba(70,130,255,.65), rgba(20,60,160,.65));
  border: 1px solid rgba(70,130,255,.55);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.ph-row{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.ph-link{
  background:none;
  border:none;
  color: #bcd6ff;
  cursor:pointer;
  font-weight:700;
  text-align:right;
  padding: 0;
}
.ph-link-inline{
  background:none;
  border:none;
  color: #bcd6ff;
  cursor:pointer;
  font-weight:800;
  padding: 0 0 0 6px;
}

.ph-mini{
  margin-top: 12px;
  font-size: 13px;
  opacity: .9;
  text-align:center;
}

.ph-role{
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(255,255,255,.03);
}
.ph-role-title{
  font-size: 13px;
  opacity:.9;
  margin-bottom: 8px;
  font-weight: 800;
}
.ph-radio{
  display:flex; align-items:center; gap: 10px;
  padding: 8px 6px;
  cursor:pointer;
}
.ph-radio input{ transform: scale(1.1); }

.ph-foot{
  margin-top: 14px;
  font-size: 12px;
  opacity: .7;
  text-align:center;
}
/* ======================================================================== */

/* ========================================================================
   AUTH MODAL (v5 hardening)
   - Fixes unreadable/black text on some mobile browsers
   - Ensures modal is clickable (no invisible backdrop intercept)
   - Adds Prague background + subtle stars to match provided reference
   ======================================================================== */

#modalAuth.ph-backdrop{
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 14px !important;
  z-index: 2147483640 !important;

  /* Prague background (avoid over-darkening, per reference) */
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.55)),
    var(--authwall) center/cover no-repeat !important;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#modalAuth.ph-backdrop[hidden]{
  display: none !important;
}

#modalAuth.ph-backdrop .ph-modal{
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100svh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: hidden;

  padding-bottom: calc(18px + env(safe-area-inset-bottom));

  background: linear-gradient(180deg, rgba(26,26,60,.82), rgba(12,12,26,.86)) !important;
  border: 1px solid rgba(219,190,97,.62) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  position: relative;
}

#modalAuth.ph-backdrop .ph-modal::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;

  /* subtle star field */
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.62) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 52%, rgba(255,255,255,.52) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 72%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 14% 82%, rgba(255,255,255,.35) 0 1px, transparent 2px);

  opacity: .20;
  mix-blend-mode: screen;
}

#modalAuth.ph-backdrop .ph-modal > *{
  position: relative;
}

/* Title fallback: some Android browsers render gradient text as black/transparent */
#modalAuth .ph-title{
  color: #ffd37a;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 26px rgba(212,175,55,.22);
}

@supports (-webkit-background-clip: text) or (background-clip: text){
  #modalAuth .ph-title{
    background: linear-gradient(180deg, #fff0c2, #d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

#modalAuth .ph-sub{
  color: rgba(255,255,255,.82);
}

/* Safety: ensure no invisible overlays steal clicks */
#modalAuth,
#modalAuth *{
  pointer-events: auto;
}