/* =====================================================================
   NEXOVERSE 2050 — Design System
   Identity: "Ignition". Void black + warm paper, one signal orange.
   Editorial grid, hairline rules, mono metadata, square-ish geometry.
   Loaded last on every page. Visual only — no logic, IDs or hooks changed.
   Type: Space Grotesk (display) · Manrope (text) · JetBrains Mono (metadata)
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --nx-void:#08090c; --nx-ink:#0f1115; --nx-surface:#14161c; --nx-raise:#1b1e26;
  --nx-line:rgba(255,255,255,.10); --nx-line-2:rgba(255,255,255,.20);
  --nx-text:#eef0f4; --nx-mute:#a4abb8; --nx-dim:#7f8794;
  --nx-signal:#ff5a1f; --nx-signal-hi:#ff7a45; --nx-signal-deep:#e8420f; --nx-signal-ink:#ffffff;
  --nx-ice:#8fd0ff; --nx-ok:#4ade80; --nx-warn:#ffc247; --nx-danger:#ff5d5d;
  --nx-paper:#eeeae1; --nx-paper-2:#e4dfd3; --nx-paper-ink:#101114; --nx-paper-mute:#55585f; --nx-paper-line:rgba(16,17,20,.14);
  --nx-r:10px; --nx-r-lg:16px;
  --nx-ease:cubic-bezier(.22,1,.36,1);
  --nx-mono:var(--font-mono,'JetBrains Mono',ui-monospace,Menlo,monospace);
  --nx-gutter:clamp(20px,5vw,72px);
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---------- 2. Base ---------- */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--nx-text);
  background:var(--nx-void)!important;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px)!important;
  background-size:64px 64px!important; background-attachment:fixed!important;
  text-rendering:optimizeLegibility;
}
body::before,body::after{content:none!important}
.aurora,.aurora-orb,.aurora-bg,.aurora-blob,.auth-orbit{display:none!important}
::selection{background:var(--nx-signal);color:#fff}
h1,h2,h3,h4,h5,h6,.page-title,.section-title,.section-h2{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.035em; line-height:1.06; color:inherit;
}
p{color:var(--nx-mute)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--nx-signal); outline-offset:3px; border-radius:4px;
}
small,label,.badge,[class*="badge"]{font-weight:600}
* {scrollbar-width:thin;scrollbar-color:#3a3f4a transparent}
.nx-label,.section-tag,.hero-badge,.workspace-label,.stat-label,.auth-eyebrow,.auth-kicker,.step-meta span{
  font-family:var(--nx-mono)!important; font-size:.72rem!important; font-weight:500!important;
  letter-spacing:.14em!important; text-transform:uppercase!important;
}
.section-tag{
  display:inline-flex; align-items:center; gap:10px; padding:0!important; border:0!important; background:none!important;
  color:var(--nx-signal)!important; border-radius:0!important;
}
.section-tag::before{content:"";width:22px;height:1px;background:currentColor}
.grad-text,.gradient-text{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--nx-signal)!important;animation:none!important}

/* ---------- 3. Buttons ---------- */
.btn-primary,.btn-hero-primary,.page-btn-primary,.btn-home,.navbar-auth-primary,.share-btn.primary,.reset-modal-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 22px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  color:#fff!important; background:var(--nx-signal)!important; background-image:none!important;
  border:1px solid var(--nx-signal)!important; border-radius:var(--nx-r)!important; box-shadow:none!important;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:background .25s,transform .25s var(--nx-ease),border-color .25s;
}
.btn-primary:hover,.btn-hero-primary:hover,.page-btn-primary:hover,.btn-home:hover,.navbar-auth-primary:hover,.share-btn.primary:hover{
  background:var(--nx-signal-hi)!important; border-color:var(--nx-signal-hi)!important; transform:translateY(-2px);
}
.btn-primary:active,.btn-hero-primary:active,.page-btn-primary:active{transform:translateY(0) scale(.98)}
.btn-hero-ghost,.btn-ghost,.btn-outline,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 22px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:var(--nx-text)!important; background:transparent!important; border:1px solid var(--nx-line-2)!important;
  border-radius:var(--nx-r)!important; text-decoration:none; transition:border-color .25s,background .25s,transform .25s var(--nx-ease);
}
.btn-hero-ghost:hover,.btn-ghost:hover,.btn-outline:hover,.btn-secondary:hover{border-color:var(--nx-text)!important;background:rgba(255,255,255,.05)!important;transform:translateY(-2px)}
button:disabled,.btn-primary[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---------- 4. Forms ---------- */
input,select,textarea,.input-field{font-family:var(--font-body)}
.input-field,input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=datetime-local],select,textarea{
  background:var(--nx-ink)!important; color:var(--nx-text)!important;
  border:1px solid var(--nx-line-2)!important; border-radius:var(--nx-r)!important; min-height:46px; font-size:16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
textarea{min-height:110px}
input::placeholder,textarea::placeholder{color:var(--nx-dim)}
input:focus,select:focus,textarea:focus,.input-field:focus{
  border-color:var(--nx-signal)!important; box-shadow:0 0 0 3px rgba(255,90,31,.22)!important; outline:none!important;
}
label{font-family:var(--font-body);color:var(--nx-text)}

/* ---------- 5. Surfaces (cards, panels, modals) ---------- */
.card,.saas-card,.section-card,.page-card,.stat-card,.dash-stat,.chart-card,.comm-card,.community-card,.ev-card,.event-card,
.event-info-card,.event-detail-summary-card,.events-summary-card,.profile-card,.profile-panel,.profile-stat,.profile-stats-card,
.profile-community-card,.profile-event-card,.quick-action-card,.contact-card,.contact-form-card,.verify-form-card,.verify-result-card,
.analytics-hero-card,.analytics-hero-panel,.admin-whats-new-card,.ai-tool-card,.guide-workspace-card,.cover-editor-card,.preview-card,
.attendance-card,.attendance-metric-card,.attendance-result-card,.attendance-table-panel,.approval-card,.ambassador-card,
.content-card,.panel,.modal-card,.share-modal-card,.share-link-panel,.auth-card{
  background:var(--nx-surface)!important; background-image:none!important;
  border:1px solid var(--nx-line)!important; border-radius:var(--nx-r-lg)!important; box-shadow:none!important;
  transition:transform .35s var(--nx-ease),border-color .25s,background .25s!important;
}
.ev-card:hover,.event-card:hover,.comm-card:hover,.community-card:hover,.quick-action-card:hover,.ai-tool-card:hover,
.profile-community-card:hover,.profile-event-card:hover,.stat-card:hover{
  transform:translateY(-4px)!important; border-color:var(--nx-signal)!important; background:var(--nx-raise)!important;
}
.event-card-banner,.community-card-banner{border-radius:calc(var(--nx-r-lg) - 2px) calc(var(--nx-r-lg) - 2px) 0 0;overflow:hidden}
.event-card-banner img,.community-card-banner img,.event-card-banner-img{transition:transform .8s var(--nx-ease)}
.ev-card:hover img,.event-card:hover img,.community-card:hover img{transform:scale(1.05)}
.event-card-category,.community-card-pill,.filter-chip,.badge{
  font-family:var(--nx-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; border-radius:6px;
}
.filter-chip{border:1px solid var(--nx-line-2);background:transparent;min-height:38px;transition:background .2s,border-color .2s,color .2s}
.filter-chip:hover{border-color:var(--nx-text)}
.filter-chip.active,.filter-chip[aria-pressed="true"]{background:var(--nx-text);color:var(--nx-void);border-color:var(--nx-text)}
.modal-overlay{background:rgba(5,6,8,.78);backdrop-filter:blur(6px)}
.modal,.modal-card,.share-modal-card{animation:nxPop .4s var(--nx-ease) both;border-color:var(--nx-line-2)!important}
@keyframes nxPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- 6. Tables ---------- */
.data-table,table{border-collapse:separate;border-spacing:0}
.data-table th,th{
  font-family:var(--nx-mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nx-dim);background:var(--nx-ink);text-align:left;
}
.data-table td,.data-table th,td,th{border-bottom:1px solid var(--nx-line)}
.data-table tbody tr{transition:background .2s}
.data-table tbody tr:hover{background:rgba(255,90,31,.06)}

/* ---------- 7. Shared navbar (inner pages) ---------- */
#navbar.navbar{
  --nav-ink:var(--nx-text);--nav-muted:var(--nx-mute);--nav-line:var(--nx-line);--nav-blue:var(--nx-signal);--nav-blue-dark:var(--nx-signal-hi);
  height:68px!important; background:rgba(8,9,12,.86)!important; border:0!important; border-bottom:1px solid var(--nx-line)!important;
  box-shadow:none!important; backdrop-filter:blur(14px);
  transition:height .3s var(--nx-ease),background .3s;
}
#navbar.navbar.scrolled{height:60px!important;background:rgba(8,9,12,.97)!important}
#navbar .navbar-inner{max-width:1480px;margin:0 auto}
#navbar .navbar-brand-name{font-family:var(--font-display)!important;font-weight:700!important;font-size:1.15rem!important;letter-spacing:-.04em!important;color:var(--nx-text)!important}
#navbar .navbar-brand-tagline{font-family:var(--nx-mono)!important;font-size:.6rem!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--nx-dim)!important}
#navbar .navbar-brand-mark{border-radius:10px!important;background:var(--nx-paper)!important;border:0!important;box-shadow:none!important}
#navbar .top-nav-links{gap:2px!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important}
#navbar .top-nav-link,#navbar .top-nav-more>summary{
  position:relative; min-height:68px!important; padding:0 14px!important; border-radius:0!important; background:none!important;
  font-family:var(--nx-mono)!important; font-size:.72rem!important; font-weight:500!important; letter-spacing:.12em!important; text-transform:uppercase;
  color:var(--nx-mute)!important; display:inline-flex; align-items:center; transition:color .2s;
}
#navbar .top-nav-link:hover,#navbar .top-nav-more>summary:hover{color:var(--nx-text)!important;background:none!important}
#navbar .top-nav-link::before{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--nx-signal);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--nx-ease);
}
#navbar .top-nav-link:hover::before{transform:scaleX(1)}
#navbar .top-nav-link.active,#navbar .top-nav-more.active>summary{color:var(--nx-text)!important;background:none!important}
#navbar .top-nav-link.active::before{transform:scaleX(1)}
#navbar .top-nav-link.active::after{display:none!important}
#navbar .top-nav-more-menu,#navbar .profile-dropdown{
  background:var(--nx-surface)!important;border:1px solid var(--nx-line-2)!important;border-radius:var(--nx-r-lg)!important;
  box-shadow:0 24px 60px -20px #000!important;animation:nxPop .3s var(--nx-ease) both;
}
#navbar .top-nav-more-link,.dropdown-item{border-radius:8px;font-family:var(--font-body);transition:background .2s,color .2s}
#navbar .top-nav-more-link:hover,.dropdown-item:hover{background:rgba(255,255,255,.06)!important;color:var(--nx-text)!important}
#navbar .top-nav-more-link.active,.dropdown-item.active{color:var(--nx-signal)!important;background:rgba(255,90,31,.08)!important}
#navbar .navbar-auth-link{font-family:var(--nx-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nx-mute)!important}
#navbar .navbar-auth-link:hover{color:var(--nx-text)!important;background:none!important}
#navbar .navbar-auth-primary{min-height:42px;padding:0 18px;border-radius:var(--nx-r)!important}
#navbar .profile-trigger{border:1px solid var(--nx-line-2)!important;background:transparent!important;border-radius:999px!important}
#navbar .profile-trigger:hover{border-color:var(--nx-text)!important;background:rgba(255,255,255,.05)!important}

/* ---------- 8. Page shell, loader, headings ---------- */
.page-content,.main-content{animation:nxIn .6s var(--nx-ease) both}
@keyframes nxIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.page-title,.page-heading h1{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:600}
#page-loader{background:var(--nx-void)!important}
.loader-spinner,.auth-loading-spinner{border-color:var(--nx-line-2)!important;border-top-color:var(--nx-signal)!important}
.skeleton,[class*="skeleton"]{background:linear-gradient(90deg,var(--nx-surface) 25%,var(--nx-raise) 50%,var(--nx-surface) 75%)!important;background-size:200% 100%;animation:nxShimmer 1.4s infinite}
@keyframes nxShimmer{to{background-position:-200% 0}}
.toast{border-radius:var(--nx-r);border:1px solid var(--nx-line-2);animation:nxPop .35s var(--nx-ease) both}

/* ---------- 9. Auth pages ---------- */
.auth-page{background:var(--nx-void)!important}
.auth-card{padding:clamp(24px,4vw,44px)!important;border-color:var(--nx-line-2)!important}
.auth-heading{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:600}
.auth-story{background:var(--nx-ink)!important;border-right:1px solid var(--nx-line)}
.auth-link,.auth-footer a{color:var(--nx-signal)!important;font-weight:600}
.auth-link:hover,.auth-footer a:hover{text-decoration:underline}

/* ---------- 10. Motion helpers ---------- */
.nx-progress{position:fixed;inset:0 auto auto 0;height:2px;width:100%;z-index:400;transform-origin:0 50%;transform:scaleX(0);background:var(--nx-signal);pointer-events:none}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--nx-ease),transform .9s var(--nx-ease)}
.reveal.visible{opacity:1;transform:none}
.nx-stagger:not(.nx-in)>*{opacity:0}
.nx-stagger.nx-in>*{animation:nxUp .8s var(--nx-ease) backwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes nxUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- 11. Responsive + motion safety ---------- */
html,body{overflow-x:hidden}
img,svg,video{max-width:100%}
@media (max-width:720px){
  .btn-primary,.btn-hero-primary,.btn-hero-ghost,.btn-outline,.btn-secondary{width:100%}
  #navbar .top-nav-link,#navbar .top-nav-more>summary{min-height:52px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.nx-stagger>*{opacity:1!important;transform:none!important}
}

/* ---------- 12. Navbar frame reset (legacy pill container) ---------- */
#navbar.navbar{padding:0!important}
#navbar .navbar-inner{
  width:100%!important;max-width:1480px!important;height:100%!important;margin:0 auto!important;padding:0 var(--nx-gutter)!important;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
}
#navbar .navbar-right{gap:8px}
@media(max-width:900px){
  #navbar .top-nav-menu{background:var(--nx-void)!important;border-top:1px solid var(--nx-line)}
  #navbar .top-nav-link{font-family:var(--font-display)!important;font-size:1.6rem!important;letter-spacing:-.03em!important;text-transform:none!important;color:var(--nx-text)!important;border-bottom:1px solid var(--nx-line)}
}

/* ---------- 13. Search + toolbar controls ---------- */
.search-bar{background:var(--nx-ink)!important;border:1px solid var(--nx-line-2)!important;border-radius:var(--nx-r)!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
.search-bar:focus-within{border-color:var(--nx-signal)!important;box-shadow:0 0 0 3px rgba(255,90,31,.22)!important}
.search-bar input{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.page-subtitle,.page-desc{color:var(--nx-mute)}
.stat-label,.events-summary-label{color:var(--nx-dim)!important}

/* ---------- 14. Auth refinements ---------- */
.auth-form label,.auth-card label{color:var(--nx-text)!important;font-weight:600}
.auth-story p,.auth-subtitle,.auth-card p{color:var(--nx-mute)}
.auth-eyebrow{background:none!important;border:0!important;padding:0!important;color:var(--nx-signal)!important}
.auth-submit{background:var(--nx-signal)!important;background-image:none!important;border:1px solid var(--nx-signal)!important;box-shadow:none!important;border-radius:var(--nx-r)!important;color:#fff!important}
.auth-submit:hover{background:var(--nx-signal-hi)!important;transform:translateY(-2px)}
.auth-story h2 .auth-accent,.auth-story h2 em,.auth-story h2 span{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--nx-signal)!important}

/* ---------- 15. Small-screen polish ---------- */
@media(max-width:560px){
  #navbar .navbar-brand-tagline,nav#navbar .nav-brand-tagline{display:none!important}
}

/* ---------- 16. Website-wide layout refinement ---------- */
:root{
  --nx-content-max:1480px;
  --nx-page-gutter:clamp(16px,4vw,56px);
  --nx-section-gap:clamp(24px,4vw,56px);
}

body{min-width:0}
main,section,article,aside,header,footer,nav,form,fieldset{min-width:0}
button,.btn,a{max-width:100%}
h1,h2,h3,h4,h5,h6,p,span,td,th,label{overflow-wrap:anywhere}

#navbar.navbar{
  width:auto;
  max-width:100%;
  height:68px!important;
}
#navbar .navbar-inner{
  width:min(100%,var(--nx-content-max))!important;
  padding-inline:var(--nx-page-gutter)!important;
  gap:clamp(12px,2.5vw,36px);
}
#navbar .navbar-brand{margin-right:clamp(8px,2vw,28px)}
#navbar .top-nav-menu{min-width:0}
#navbar .top-nav-links{max-width:100%}

.main-content{
  width:100%;
  min-width:0;
  padding-top:68px;
}
.page-content{
  width:min(100%,var(--nx-content-max));
  margin-inline:auto;
  padding:clamp(24px,3vw,40px) var(--nx-page-gutter) clamp(48px,6vw,80px);
}
.section-header{
  align-items:center;
  margin-bottom:clamp(18px,2.5vw,30px);
  padding:0;
}
.section-header h1,.section-header h2,.page-content h1,.page-content h2{
  max-width:100%;
  font-size:clamp(1.75rem,3.2vw,2.8rem);
}
.page-heading-actions{max-width:100%}
.page-heading-actions .btn{flex:0 0 auto}

.grid,.grid-2,.grid-3,.grid-4,.stats-grid,.events-grid,.communities-grid,.cards-grid,
.quick-actions,.page-card-grid,.analytics-grid,.dashboard-grid{
  min-width:0;
}
.grid > *,.grid-2 > *,.grid-3 > *,.grid-4 > *,.stats-grid > *,.events-grid > *,
.communities-grid > *,.cards-grid > *,.quick-actions > *,.page-card-grid > *,
.analytics-grid > *,.dashboard-grid > *{min-width:0}

.data-table-wrap,.table-wrap,.table-responsive,.attendance-table-panel,.admin-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table{width:100%;min-width:0}
td,th{max-width:360px}

.modal-overlay,.modal-backdrop,.reset-modal,.login-verification-overlay,.signup-verification-overlay{
  padding:clamp(12px,3vw,28px);
}
.modal,.modal-card,.reset-modal-dialog,.login-verification-modal,.signup-verification-modal{
  width:min(100%,860px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
}

.page-main{
  width:min(100%,1280px);
  padding:clamp(112px,12vw,148px) var(--nx-page-gutter) clamp(56px,8vw,96px);
}
.page-hero{padding:clamp(18px,3vw,32px) 0 clamp(28px,5vw,52px)}
.page-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.page-card{padding:clamp(20px,2.5vw,30px)}

.auth-page{
  min-height:100dvh;
  padding:clamp(20px,4vw,40px) var(--nx-page-gutter);
}
.auth-card{width:min(100%,520px);max-width:520px}
.auth-form,.auth-card{min-width:0}

.event-card-banner,.community-card-banner,.event-card-accent{
  aspect-ratio:16/7;
  height:auto;
  min-height:0;
}
.event-card-banner img,.community-card-banner img{width:100%;height:100%;object-fit:cover}

@media (max-width:1100px){
  #navbar .top-nav-link,#navbar .top-nav-more>summary{padding-inline:10px!important}
  .page-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .section-header{align-items:flex-start;flex-wrap:wrap}
  .section-header > *{max-width:100%}
  .page-heading-actions{width:100%}
  .page-heading-actions .btn{flex:1 1 auto}
  .page-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  #navbar .navbar-inner{padding-inline:16px!important}
  .main-content{padding-top:64px}
  .page-content{padding-inline:16px;padding-top:22px}
  .section-header h1,.section-header h2,.page-content h1,.page-content h2{font-size:clamp(1.65rem,7vw,2.2rem)}
  .page-heading-actions,.page-heading-actions .btn{width:100%}
  .page-card-grid{grid-template-columns:1fr}
  .page-main{padding-top:98px;padding-inline:16px}
  .page-hero h1{font-size:clamp(2rem,9vw,3rem)}
  .page-hero p{font-size:15px;line-height:1.65}
  .page-card{padding:20px}
  .modal-overlay,.modal-backdrop,.reset-modal,.login-verification-overlay,.signup-verification-overlay{padding:12px}
  .modal,.modal-card,.reset-modal-dialog,.login-verification-modal,.signup-verification-modal{
    max-height:calc(100dvh - 24px);
    border-radius:var(--nx-r);
  }
}

@media (max-width:480px){
  .auth-page{padding:16px 12px}
  .auth-card{padding:24px 18px!important}
  .auth-logo{margin-bottom:24px}
  .auth-heading h1{font-size:clamp(1.55rem,8vw,2rem)}
  .btn-primary,.btn-hero-primary,.btn-hero-ghost,.btn-outline,.btn-secondary,
  .auth-submit,.google-btn{min-height:44px}
  .quick-actions{grid-template-columns:1fr!important}
  .page-heading-actions .btn{flex-basis:100%}
  body.communities-page .communities-tabs{
    flex-wrap:wrap;
    overflow-x:visible;
    gap:6px;
  }
  body.communities-page .communities-tabs .tab-btn{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    padding-inline:8px;
    font-size:11px;
  }
}

@media (max-width:360px){
  #navbar .navbar-inner{padding-inline:12px!important}
  .page-content{padding-inline:12px}
  .page-main{padding-inline:12px}
  .page-card{padding:16px}
}