/* ═══ PAXLIVE SHARED CSS ═══ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Raleway:wght@400;500;600;700&display=swap');
:root{--ivory:#F8F4EE;--ivory-deep:#EDE7DC;--ivory-border:#DDD5C8;--bb:#3B2D6E;--bb-md:#5444A0;--bb-lt:#7B6CC0;--bb-bg:#EBE8F7;--green:#2E9E6B;--green-bg:#E5F4ED;--rose:#C7445A;--rose-bg:#FAE8EB;--amber:#C47F1A;--amber-bg:#FBF0DB;--teal:#1A7A8A;--teal-bg:#E0F2F5;--text:#1C1828;--text2:#4A4060;--muted:#7A7090;--surface:#fff;--sh:0 3px 16px rgba(59,45,110,.10);--sh-lg:0 10px 40px rgba(59,45,110,.16);--r:16px;--rs:10px;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--text);font-family:'Raleway',sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* HEADER */
#site-header{position:fixed;inset:0 0 auto 0;z-index:300;height:62px;display:flex;align-items:center;gap:12px;padding:0 24px;background:rgba(248,244,238,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--ivory-border)}
.logo{font-family:'Unbounded',sans-serif;font-weight:800;font-size:16px;color:var(--bb);letter-spacing:-.5px;text-decoration:none;display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-mark{width:30px;height:30px;background:var(--bb);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo span{color:var(--bb-lt)}
.hsearch{flex:1;max-width:420px;position:relative}
.hsearch input{width:100%;background:var(--surface);border:1.5px solid var(--ivory-border);border-radius:40px;padding:9px 16px 9px 40px;color:var(--text);font-family:'Raleway',sans-serif;font-size:13px;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s}
.hsearch input::placeholder{color:var(--muted)}
.hsearch input:focus{border-color:var(--bb-lt);box-shadow:0 0 0 3px rgba(84,68,160,.10)}
.sic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.nav-tabs{display:flex;align-items:center;gap:2px;background:var(--ivory-deep);border-radius:40px;padding:3px}
.ntab{padding:7px 13px;border-radius:40px;font-family:'Raleway',sans-serif;font-size:11.5px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .2s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.ntab:hover:not(.active){color:var(--bb-lt)}.ntab.active{background:var(--surface);color:var(--bb);box-shadow:0 1px 6px rgba(59,45,110,.08)}
.hright{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.hbtn{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1.5px solid var(--ivory-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all .2s;flex-shrink:0}
.hbtn:hover{border-color:var(--bb-lt);color:var(--bb)}
.av-btn{background:linear-gradient(135deg,var(--bb-bg),var(--rose-bg));color:var(--bb);font-size:12px;font-weight:800}
.hbtn-login{padding:8px 16px;border-radius:40px;border:1.5px solid var(--ivory-border);background:var(--surface);color:var(--text2);font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
.hbtn-login:hover{border-color:var(--bb-lt);color:var(--bb)}
.post-btn{display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:40px;background:var(--bb);color:#fff;font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.post-btn:hover{background:var(--bb-md);transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,45,110,.28)}

/* AUTH MODAL */
.auth-overlay{position:fixed;inset:0;z-index:600;background:rgba(28,24,40,.65);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:16px}
.auth-overlay.show{opacity:1;pointer-events:all}
.auth-modal{background:var(--surface);border-radius:24px;width:100%;max-width:420px;padding:36px;box-shadow:var(--sh-lg);transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.34,1.3,.64,1);position:relative}
.auth-overlay.show .auth-modal{transform:none}
.auth-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ivory-border);background:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all .18s}
.auth-close:hover{background:var(--rose-bg);border-color:var(--rose);color:var(--rose)}
.auth-logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:22px;justify-content:center}
.auth-logo-mark{width:34px;height:34px;background:var(--bb);border-radius:10px;display:flex;align-items:center;justify-content:center}
.auth-logo-text{font-family:'Unbounded',sans-serif;font-size:17px;font-weight:800;color:var(--bb)}
.auth-logo-text span{color:var(--bb-lt)}
.auth-tabs{display:flex;gap:2px;background:var(--ivory-deep);border-radius:40px;padding:3px;margin-bottom:22px}
.auth-tab{flex:1;padding:9px;border-radius:40px;border:none;background:transparent;font-family:'Raleway',sans-serif;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);transition:all .2s}
.auth-tab.active{background:var(--surface);color:var(--bb);box-shadow:0 1px 6px rgba(59,45,110,.08)}
.auth-field{display:flex;flex-direction:column;gap:5px}
.auth-label{font-size:12px;font-weight:700;color:var(--text2)}
.auth-input{padding:11px 14px;border:1.5px solid var(--ivory-border);border-radius:var(--rs);font-family:'Raleway',sans-serif;font-size:14px;font-weight:500;color:var(--text);background:var(--surface);outline:none;transition:border-color .2s,box-shadow .2s}
.auth-input:focus{border-color:var(--bb-lt);box-shadow:0 0 0 3px rgba(84,68,160,.10)}
.auth-input.error{border-color:var(--rose)}
.auth-submit{padding:13px;border-radius:var(--rs);background:var(--bb);color:#fff;font-family:'Unbounded',sans-serif;font-size:10.5px;font-weight:700;border:none;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.auth-submit:hover{background:var(--bb-md);box-shadow:0 4px 16px rgba(59,45,110,.3)}
.auth-submit:disabled{opacity:.6;pointer-events:none}
.auth-social-btn{flex:1;padding:10px;border-radius:var(--rs);border:1.5px solid var(--ivory-border);background:var(--surface);color:var(--text2);font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s}
.auth-social-btn:hover{border-color:var(--bb-lt);color:var(--bb)}
.auth-footer{text-align:center;font-size:12px;color:var(--muted);font-weight:500;margin-top:4px}
.auth-footer a{color:var(--bb);font-weight:700;cursor:pointer}
.auth-footer a:hover{text-decoration:underline}

/* MOB NAV */
#mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:rgba(248,244,238,.96);backdrop-filter:blur(18px);border-top:1px solid var(--ivory-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
.mni{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;cursor:pointer;color:var(--muted);transition:color .18s;font-size:10px;font-weight:700;border:none;background:none;font-family:'Raleway',sans-serif}
.mni.active{color:var(--bb)}

/* UTILITIES */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* RESPONSIVE */
@media(max-width:1050px){.ntab span{display:none}.ntab{padding:7px 10px;gap:0}}
@media(max-width:700px){
  #site-header{padding:0 14px;height:56px;gap:8px}.hsearch{max-width:none}
  .nav-tabs{display:none}#mob-nav{display:flex}
  .post-btn span{display:none}.post-btn{padding:9px 12px}
}

/* ─── HAMBURGER BUTTON ─── */
.hburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1.5px solid var(--ivory-border);cursor:pointer;padding:0;transition:all .2s;flex-shrink:0}
.hburger span{display:block;width:16px;height:2px;background:var(--text2);border-radius:2px;transition:all .25s}
.hburger:hover{border-color:var(--bb-lt)}
.hburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ─── MOBILE DROPDOWN MENU ─── */
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;z-index:299;background:var(--surface);border-bottom:1px solid var(--ivory-border);box-shadow:0 8px 32px rgba(59,45,110,.12);transform:translateY(-10px);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:all}
.mobile-menu-inner{padding:12px 16px 16px;display:flex;flex-direction:column;gap:2px}
.mm-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-family:'Raleway',sans-serif;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer;border:none;background:transparent;text-decoration:none;transition:all .15s}
.mm-item:hover,.mm-item.active{background:var(--bb-bg);color:var(--bb)}
.mm-icon{width:36px;height:36px;border-radius:10px;background:var(--ivory);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted);transition:all .15s}
.mm-item:hover .mm-icon,.mm-item.active .mm-icon{background:var(--bb);color:#fff}
.mm-divider{height:1px;background:var(--ivory-border);margin:6px 0}
.mm-logout{color:var(--rose)}
.mm-logout:hover{background:var(--rose-bg);color:var(--rose)}
.mm-logout .mm-icon{color:var(--rose)}
.mm-logout:hover .mm-icon{background:var(--rose-bg);color:var(--rose)}

/* ─── MOB-NAV-BAR (bottom bar) ─── */
.mob-nav-bar{position:fixed;bottom:0;left:0;right:0;z-index:300;background:rgba(248,244,238,.96);backdrop-filter:blur(18px);border-top:1px solid var(--ivory-border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));display:none;justify-content:space-around;align-items:center}
.mob-nav-fab-wrap{flex:1;display:flex;justify-content:center;align-items:center}
.mob-nav-fab{width:48px;height:48px;background:var(--bb);border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 4px 18px rgba(59,45,110,.36);margin-top:-16px;transition:all .2s}
.mob-nav-fab:hover{background:var(--bb-md);transform:scale(1.07)}
.mni{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;cursor:pointer;color:var(--muted);transition:color .18s;font-size:10px;font-weight:700;border:none;background:none;font-family:'Raleway',sans-serif;text-decoration:none}
.mni svg{transition:color .18s}
.mni.active{color:var(--bb)}

/* ─── RESPONSIVE OVERRIDES ─── */
@media(max-width:900px){
  .hburger{display:flex}
  .nav-tabs{display:none!important}
  .desktop-only{display:none!important}
  .mobile-menu{display:block}
  .mob-nav-bar{display:flex}
  #mob-nav{display:flex}
}
@media(min-width:901px){
  .mobile-menu{display:none!important}
}


/* ─── DRAWER ─── */
.drawer-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 490;
  background: rgba(28,24,40,.45);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
@media(max-width:900px) {
  .drawer-overlay { display: block; pointer-events: none; }
}

.pax-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 500;
  width: 280px; max-width: 85vw;
  background: var(--surface, #fff);
  border-right: 1px solid var(--ivory-border, #ddd);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overflow-x: hidden;
  will-change: transform;
}
.pax-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--ivory-border, #ddd);
  flex-shrink: 0;
}
.drawer-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ivory, #f8f4ee); border: 1.5px solid var(--ivory-border, #ddd);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted, #888); transition: all .18s;
}
.drawer-close:hover { background: var(--bb-bg, #ebe8f7); color: var(--bb, #3b2d6e); border-color: var(--bb-lt, #7b6cc0); }

.drawer-nav { padding: 12px 10px; flex: 1; }
.drawer-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted, #888); padding: 4px 8px 8px;
}
.drawer-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text2, #444); text-decoration: none;
  transition: all .15s; cursor: pointer;
}
.drawer-item:hover, .drawer-item.active {
  background: var(--bb-bg, #ebe8f7); color: var(--bb, #3b2d6e);
}
.drawer-item-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ivory, #f8f4ee);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted, #888); transition: all .15s;
}
.drawer-item:hover .drawer-item-ic, .drawer-item.active .drawer-item-ic {
  background: var(--bb, #3b2d6e); color: #fff;
}

.drawer-divider { height: 1px; background: var(--ivory-border, #ddd); margin: 4px 10px; }

.drawer-footer {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ivory-border, #ddd);
  flex-shrink: 0;
}
.drawer-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; margin-bottom: 8px;
}
.drawer-user-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bb-bg, #ebe8f7); color: var(--bb, #3b2d6e);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.drawer-user-info { flex: 1; min-width: 0; }
.drawer-user-name { font-size: 13px; font-weight: 700; color: var(--text, #1c1828); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-user-email { font-size: 11px; color: var(--muted, #888); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-logout {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border-radius: 10px; border: none;
  background: transparent; font-family: 'Raleway', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--rose, #c7445a);
  cursor: pointer; transition: background .15s;
}
.drawer-logout:hover { background: var(--rose-bg, #fae8eb); }
.drawer-login-btn {
  width: 100%; padding: 11px; border-radius: 12px;
  background: var(--bb, #3b2d6e); color: #fff;
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; transition: background .2s;
}
.drawer-login-btn:hover { background: var(--bb-md, #5444a0); }

/* Hide old dropdown menu everywhere */
.mobile-menu { display: none !important; }

@media(max-width:900px) {
  .mob-searchbar { display: flex !important; flex: 1; max-width: none; }
}

/* ─── HEADER RESPONSIVE (финальная версия) ─── */

/* На десктопе: бургер скрыт, лого видно, поиск видно, навигация видна */
.hburger { display: none; }
.hflex { display: flex; }

/* Мобильный <= 900px */
@media (max-width: 900px) {
  .hburger { display: flex; }
  .nav-tabs { display: none !important; }
  .hright { display: none !important; }
  /* Логотип на мобиле - скрываем текст, показываем только mark */
  .logo span { display: none; }
  /* Поиск растягивается на всю ширину */
  .hflex { flex: 1; max-width: none !important; }
}

/* Очень маленький экран <= 480px - логотип полностью скрываем */
@media (max-width: 480px) {
  .logo { display: none !important; }
}