/* ============================================================
   FLOWVIBE — Style CSS "Neon Cosmos" — Responsive Mobile+Desktop
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Syne:wght@300;400;600;700&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  --void:#04040e; --deep:#080820; --surface:#0d0d2b; --panel:#111136; --card:#16163f;
  --border:rgba(100,100,255,0.15); --border-glow:rgba(100,200,255,0.4);
  --neon-blue:#00d4ff; --neon-violet:#a855f7; --neon-pink:#f472b6;
  --neon-green:#00ffaa; --neon-orange:#ff7b00;
  --text-primary:#f0f0ff; --text-secondary:#c0c0e8; --text-muted:#8888bb;
  --grad-main:linear-gradient(135deg,#00d4ff,#a855f7);
  --grad-warm:linear-gradient(135deg,#f472b6,#ff7b00);
  --grad-card:linear-gradient(145deg,rgba(13,13,43,0.9),rgba(22,22,63,0.7));
  --shadow-card:0 8px 40px rgba(0,0,0,0.6),0 0 1px rgba(100,200,255,0.2);
  --shadow-hover:0 20px 60px rgba(0,212,255,0.2),0 0 2px rgba(0,212,255,0.5);
  --shadow-glow:0 0 30px rgba(0,212,255,0.15),0 0 60px rgba(168,85,247,0.1);
  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-xl:40px;
  --transition:0.3s cubic-bezier(0.4,0,0.2,1);
  --font-display:'Orbitron','Courier New',monospace;
  --font-body:'Syne','Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --navbar-h:60px; --bottom-nav-h:62px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--void);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font-family:var(--font-body)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--neon-violet);border-radius:2px}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,0.72) 0%,transparent 100%),
    radial-gradient(1px 1px at 80% 10%,rgba(0,212,255,0.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 50% 70%,rgba(168,85,247,0.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 10% 90%,rgba(255,255,255,0.62) 0%,transparent 100%),
    radial-gradient(2px 2px at 65% 85%,rgba(0,255,170,0.2) 0%,transparent 100%);
  background-size:400px 400px,300px 300px,500px 500px,350px 350px,600px 600px;
  animation:stars 60s linear infinite;
}
@keyframes stars{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:400px 400px,-300px 300px,500px -500px,-350px 350px,600px 600px}}

.bg-orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.1;pointer-events:none;z-index:0;animation:orb 20s ease-in-out infinite}
.bg-orb-1{width:500px;height:500px;background:var(--neon-blue);top:-150px;left:-150px}
.bg-orb-2{width:400px;height:400px;background:var(--neon-violet);bottom:-100px;right:-100px;animation-delay:-7s}
.bg-orb-3{width:250px;height:250px;background:var(--neon-pink);top:50%;left:50%;animation-delay:-14s}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.05)}}

/* ── NAVBAR ── */
.navbar{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,4,14,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  height:var(--navbar-h);display:flex;align-items:center;
  padding:0 1.5rem;gap:1rem;
}
.navbar-brand{
  font-family:var(--font-display);font-size:1.3rem;font-weight:900;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;text-decoration:none;letter-spacing:3px;white-space:nowrap;
  display:flex;align-items:center;
}
.navbar-nav{display:flex;align-items:center;gap:0.3rem;flex:1}
.nav-link{
  color:var(--text-secondary);text-decoration:none;
  padding:0.4rem 0.8rem;border-radius:var(--radius-sm);
  font-size:0.88rem;font-weight:600;transition:var(--transition);white-space:nowrap;
}
.nav-link:hover,.nav-link.active{color:var(--neon-blue);background:rgba(0,212,255,0.08)}
.nav-icon{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);cursor:pointer;transition:var(--transition);position:relative;flex-shrink:0;
}
.nav-icon:hover{color:var(--neon-blue);background:rgba(0,212,255,0.1)}
.badge-count{
  position:absolute;top:3px;right:3px;
  width:15px;height:15px;background:var(--neon-pink);
  border-radius:50%;font-size:0.55rem;display:flex;align-items:center;justify-content:center;font-weight:700;
}







/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.55rem 1.3rem;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:0.88rem;font-weight:600;
  border:none;cursor:pointer;text-decoration:none;
  transition:var(--transition);letter-spacing:0.5px;
  position:relative;overflow:hidden;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--grad-main);color:#fff;box-shadow:0 4px 20px rgba(0,212,255,0.3)}
.btn-primary:hover{box-shadow:0 6px 30px rgba(0,212,255,0.5);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--border-glow);color:var(--neon-blue)}
.btn-ghost:hover{background:rgba(0,212,255,0.08);border-color:var(--neon-blue)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 20px rgba(239,68,68,0.3)}
.btn-success{background:linear-gradient(135deg,#00ffaa,#00cc88);color:var(--void)}
.btn-sm{padding:0.32rem 0.8rem;font-size:0.78rem}
.btn-lg{padding:0.8rem 2rem;font-size:1rem}
.btn-block{width:100%}
.btn-icon{width:38px;height:38px;padding:0;border-radius:50%}

/* ── CARD ── */
.card{
  background:var(--grad-card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.2rem;
  box-shadow:var(--shadow-card);backdrop-filter:blur(10px);
  transition:var(--transition);position:relative;overflow:hidden;
}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon-blue),transparent);opacity:0.4}
.card:hover{box-shadow:var(--shadow-hover);border-color:rgba(0,212,255,0.25)}
.card-header{margin-bottom:1rem;padding-bottom:0.8rem;border-bottom:1px solid var(--border)}
.card-title{font-family:var(--font-display);font-size:0.85rem;letter-spacing:1.5px;color:var(--neon-blue)}

/* ── FORMS ── */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;margin-bottom:0.35rem;font-size:0.8rem;font-weight:600;color:var(--text-secondary);letter-spacing:0.5px}
.form-control{
  width:100%;padding:0.65rem 0.9rem;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text-primary);
  font-family:var(--font-body);font-size:0.9rem;
  transition:var(--transition);outline:none;-webkit-appearance:none;
}
.form-control:focus{border-color:var(--neon-blue);background:rgba(0,212,255,0.04);box-shadow:0 0 0 3px rgba(0,212,255,0.1)}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:90px}
select.form-control,select.form-control option{background-color:#111136!important;color:#e8e8ff!important}

/* ── AVATAR ── */
.avatar{
  border-radius:50%;object-fit:cover;border:2px solid var(--border);
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%230d0d2b'/%3E%3Ccircle cx='50' cy='38' r='18' fill='%234444aa'/%3E%3Cellipse cx='50' cy='82' rx='28' ry='20' fill='%234444aa'/%3E%3C/svg%3E") center/cover;
  flex-shrink:0;
}
.avatar-sm{width:32px;height:32px}
.avatar-md{width:46px;height:46px}
.avatar-lg{width:68px;height:68px}
.avatar-xl{width:96px;height:96px}
.avatar-xxl{width:120px;height:120px;border-width:3px;border-color:var(--neon-violet);box-shadow:0 0 20px rgba(168,85,247,0.3)}
.avatar-online{position:relative;display:inline-block}
.avatar-online::after{content:'';position:absolute;bottom:1px;right:1px;width:9px;height:9px;background:var(--neon-green);border-radius:50%;border:2px solid var(--void)}

/* ── USER BUBBLE ── */
.user-bubble{display:flex;flex-direction:column;align-items:center;gap:0.3rem;cursor:pointer;transition:var(--transition);padding:0.6rem;border-radius:var(--radius-md);width:80px;text-align:center}
.user-bubble:hover{background:rgba(0,212,255,0.05);transform:translateY(-3px)}
.user-bubble .avatar{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad-main) border-box;box-shadow:0 0 12px rgba(0,212,255,0.2)}
.user-bubble-name{font-size:0.65rem;color:var(--text-secondary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.user-bubble-status{font-size:0.58rem;color:var(--neon-green)}
.bubbles-grid{display:flex;flex-wrap:wrap;gap:0.2rem}

/* ── POST CARD ── */
.post-card{margin-bottom:1rem}
.post-header{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem}
.post-author{font-weight:700;color:var(--text-primary);text-decoration:none;font-size:0.9rem}
.post-author:hover{color:var(--neon-blue)}
.post-time{font-size:0.72rem;color:var(--text-muted);font-family:var(--font-mono)}
.post-content{color:var(--text-secondary);line-height:1.7;margin-bottom:0.8rem;font-size:0.92rem;word-break:break-word}
.post-image{width:100%;border-radius:var(--radius-sm);margin-bottom:0.8rem;max-height:400px;object-fit:cover;cursor:pointer;transition:var(--transition)}
.post-image:hover{opacity:0.9}
.post-actions{display:flex;gap:0.3rem;padding-top:0.7rem;border-top:1px solid var(--border);flex-wrap:wrap}
.post-action-btn{
  display:flex;align-items:center;gap:0.35rem;padding:0.35rem 0.7rem;
  border-radius:var(--radius-sm);background:transparent;border:none;
  color:var(--text-muted);cursor:pointer;font-size:0.82rem;
  transition:var(--transition);-webkit-tap-highlight-color:transparent;
}
.post-action-btn:hover,.post-action-btn.active{color:var(--neon-blue);background:rgba(0,212,255,0.08)}
.post-action-btn.liked{color:var(--neon-pink)}

/* ── LANDING ── */
.landing-grid{
  display:grid;grid-template-columns:1fr 400px;gap:2rem;
  max-width:1200px;margin:0 auto;
  padding:2rem 1.5rem;align-items:start;
  min-height:calc(100vh - var(--navbar-h));
}
.landing-tagline{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.8rem);font-weight:900;letter-spacing:2px;margin-bottom:1rem}
.landing-tagline .line-1{color:var(--text-primary);display:block}
.landing-tagline .line-2{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.landing-sub{color:var(--text-secondary);font-size:1rem;max-width:480px;line-height:1.7;margin-bottom:1.5rem}
.auth-panel{
  background:var(--grad-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.8rem;
  box-shadow:var(--shadow-glow);backdrop-filter:blur(20px);
  position:sticky;top:80px;
}
.auth-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-main);border-radius:var(--radius-lg) var(--radius-lg) 0 0}

/* ── FEED ── */
.feed-layout{
  display:grid;grid-template-columns:260px 1fr 260px;
  gap:1.2rem;max-width:1200px;margin:0 auto;
  padding:1.2rem 1rem;
}
.feed-sidebar-left,.feed-sidebar-right{position:sticky;top:70px;height:fit-content;max-height:calc(100vh - 80px);overflow-y:auto}
.feed-main{min-width:0}

/* ── PROFILE ── */
.profile-cover{width:100%;height:220px;object-fit:cover;display:block;background:linear-gradient(135deg,var(--deep),var(--neon-violet) 50%,var(--neon-blue))}
div.profile-cover{display:block}
.profile-header{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:1.2rem;box-shadow:var(--shadow-card)}
.profile-info{display:flex;align-items:flex-end;gap:1.2rem;padding:1.2rem;margin-top:-45px;position:relative;flex-wrap:wrap}
.profile-stats{display:flex;gap:1.5rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--neon-blue)}
.stat-label{font-size:0.7rem;color:var(--text-muted);letter-spacing:0.5px}

/* ── PHOTO GALLERY ── */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.4rem}
.photo-item{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);cursor:pointer;position:relative}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.photo-item:hover img{transform:scale(1.05)}

/* ── MESSENGER ── */
.messenger-layout{display:grid;grid-template-columns:290px 1fr;height:calc(100vh - var(--navbar-h))}
.contacts-panel{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.contacts-search{padding:0.8rem;border-bottom:1px solid var(--border);flex-shrink:0}
.contacts-list{flex:1;overflow-y:auto}
.contact-item{display:flex;align-items:center;gap:0.7rem;padding:0.7rem 0.9rem;cursor:pointer;transition:var(--transition);border-bottom:1px solid rgba(255,255,255,0.03);text-decoration:none}
.contact-item:hover,.contact-item.active{background:rgba(0,212,255,0.06)}
.contact-item.active{border-left:2px solid var(--neon-blue)}
.contact-name{font-weight:700;font-size:0.88rem;color:var(--text-primary)}
.contact-preview{font-size:0.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unread-badge{background:var(--neon-blue);color:var(--void);font-size:0.62rem;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-panel{display:flex;flex-direction:column;background:var(--deep);overflow:hidden}
.chat-header{padding:0.8rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.8rem;background:var(--surface);flex-shrink:0}
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.7rem}
.message-bubble{max-width:70%;padding:0.7rem 0.9rem;border-radius:var(--radius-md);font-size:0.88rem;line-height:1.5;word-break:break-word;position:relative}
.message-bubble.sent{align-self:flex-end;background:var(--grad-main);color:#fff;border-bottom-right-radius:4px}
.message-bubble.received{align-self:flex-start;background:var(--panel);border:1px solid var(--border);color:var(--text-primary);border-bottom-left-radius:4px}
.message-bubble img{max-width:100%;border-radius:var(--radius-sm);margin-top:0.4rem;cursor:pointer}
.message-time{font-size:0.62rem;opacity:0.6;margin-top:0.25rem;font-family:var(--font-mono)}
.chat-input-area{padding:0.8rem 1rem;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.chat-input-row{display:flex;align-items:center;gap:0.6rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:0.35rem 0.35rem 0.35rem 0.9rem}
.chat-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:0.9rem}
.chat-input::placeholder{color:var(--text-muted)}

/* ── LIVE ── */
.live-badge{position:absolute;top:0.8rem;left:0.8rem;background:#ef4444;color:#fff;padding:0.25rem 0.7rem;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:0.7rem;font-weight:700;letter-spacing:2px;animation:pulse-badge 2s infinite;z-index:10}
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:0.6}}
.viewer-count{position:absolute;top:0.8rem;right:0.8rem;background:rgba(0,0,0,0.65);backdrop-filter:blur(10px);color:#fff;padding:0.25rem 0.7rem;border-radius:var(--radius-sm);font-size:0.78rem;display:flex;align-items:center;gap:0.35rem;z-index:10}

/* ── ADMIN ── */
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-sidebar{background:var(--surface);border-right:1px solid var(--border);padding:1.2rem 0;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0}
.admin-nav-section{margin-bottom:1.5rem;padding:0 0.8rem}
.admin-nav-title{font-size:0.6rem;font-family:var(--font-display);letter-spacing:2px;color:var(--text-muted);margin-bottom:0.6rem;padding:0 0.4rem}
.admin-nav-link{display:flex;align-items:center;gap:0.7rem;padding:0.65rem 0.9rem;border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:0.88rem;font-weight:600;transition:var(--transition);margin-bottom:0.15rem}
.admin-nav-link:hover,.admin-nav-link.active{color:var(--neon-blue);background:rgba(0,212,255,0.08)}
.admin-nav-link.active{border-left:2px solid var(--neon-blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.admin-content{padding:1.5rem;background:var(--void);overflow-x:auto;min-width:0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.9rem;margin-bottom:1.5rem}
.stat-card{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.2rem;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat-card.blue::before{background:var(--grad-main)}
.stat-card.violet::before{background:linear-gradient(90deg,var(--neon-violet),var(--neon-pink))}
.stat-card.green::before{background:linear-gradient(90deg,var(--neon-green),var(--neon-blue))}
.stat-card.orange::before{background:var(--grad-warm)}
.stat-card-num{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--text-primary)}
.stat-card-label{font-size:0.75rem;color:var(--text-muted);letter-spacing:0.5px;margin-top:0.2rem}
.stat-card-icon{position:absolute;right:1.2rem;top:1.2rem;font-size:1.8rem;opacity:0.12}
.data-table{width:100%;border-collapse:collapse;min-width:500px}
.data-table th{padding:0.7rem 0.9rem;background:var(--panel);font-family:var(--font-display);font-size:0.65rem;letter-spacing:1px;color:var(--text-muted);text-align:left;border-bottom:2px solid var(--border)}
.data-table td{padding:0.7rem 0.9rem;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--text-secondary);vertical-align:middle}
.data-table tr:hover td{background:rgba(0,212,255,0.03)}
.status-badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.18rem 0.55rem;border-radius:20px;font-size:0.68rem;font-weight:700;letter-spacing:0.5px}
.status-badge.active{background:rgba(0,255,170,0.1);color:var(--neon-green)}
.status-badge.suspended{background:rgba(255,123,0,0.1);color:var(--neon-orange)}
.status-badge.banned{background:rgba(239,68,68,0.1);color:#ef4444}

/* ── TABS ── */
.tabs{display:flex;gap:0.2rem;border-bottom:1px solid var(--border);margin-bottom:1.2rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-btn{padding:0.65rem 1rem;background:none;border:none;color:var(--text-muted);cursor:pointer;font-family:var(--font-body);font-size:0.88rem;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.tab-btn:hover{color:var(--text-primary)}
.tab-btn.active{color:var(--neon-blue);border-bottom-color:var(--neon-blue)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(5px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:var(--transition);padding:1rem}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem;width:90%;max-width:500px;transform:scale(0.92);transition:var(--transition);box-shadow:var(--shadow-glow);position:relative;max-height:90vh;overflow-y:auto}
.modal-overlay.active .modal{transform:scale(1)}
.modal-title{font-family:var(--font-display);font-size:1rem;letter-spacing:2px;color:var(--neon-blue);margin-bottom:1.3rem}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.3rem;transition:var(--transition)}
.modal-close:hover{color:var(--neon-pink)}

/* ── NOTIFICATIONS ── */
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);z-index:100;overflow:hidden;animation:dd-in 0.2s ease}
@keyframes dd-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.notif-item{display:flex;align-items:center;gap:0.7rem;padding:0.75rem 0.9rem;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.notif-item:hover{background:rgba(0,212,255,0.05)}
.notif-item.unread{background:rgba(0,212,255,0.04)}
.notif-text{flex:1;font-size:0.82rem;color:var(--text-secondary)}
.notif-text strong{color:var(--text-primary)}
.notif-time{font-size:0.68rem;color:var(--text-muted);font-family:var(--font-mono)}

/* ── ALERTS ── */
.alert{padding:0.75rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:0.9rem;font-size:0.85rem;display:flex;align-items:center;gap:0.5rem}
.alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5}
.alert-success{background:rgba(0,255,170,0.08);border:1px solid rgba(0,255,170,0.3);color:var(--neon-green)}
.alert-info{background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.3);color:var(--neon-blue)}

/* ── MISC ── */
.divider{display:flex;align-items:center;gap:1rem;margin:1rem 0;color:var(--text-muted);font-size:0.78rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.section-title{font-family:var(--font-display);font-size:0.72rem;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin-bottom:0.8rem;display:flex;align-items:center;gap:0.7rem}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.text-glow-blue{color:var(--neon-blue);text-shadow:0 0 20px rgba(0,212,255,0.5)}
.text-glow-violet{color:var(--neon-violet);text-shadow:0 0 20px rgba(168,85,247,0.5)}
.text-glow-pink{color:var(--neon-pink);text-shadow:0 0 20px rgba(244,114,182,0.5)}
.text-glow-green{color:var(--neon-green);text-shadow:0 0 20px rgba(0,255,170,0.5)}
.flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.gap-1{gap:0.5rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem}
.mt-1{margin-top:0.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:0.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem}
.text-center{text-align:center}
.text-sm{font-size:0.83rem} .text-xs{font-size:0.72rem}
.text-muted{color:var(--text-muted)} .text-secondary{color:var(--text-secondary)}
.fw-bold{font-weight:700} .w-100{width:100%}
.hidden{display:none!important} .relative{position:relative}
.spinner{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--neon-blue);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}



/* ─── Nav Drawer Mobile ─── */






/* ─── Bottom Navigation Mobile ─── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(4,4,14,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 900;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-inner {
  display: flex;
  align-items: stretch;
  height: 58px;
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
  min-height: 48px;
}
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  flex-shrink: 0;
  display: block;
}
.bottom-nav-item span {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  display: block;
  white-space: nowrap;
}
.bottom-nav-item.active,
.bottom-nav-item:active { color: var(--neon-blue); }
.bottom-nav-item.active svg { stroke: var(--neon-blue); }

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width:1024px){
  .feed-layout{grid-template-columns:220px 1fr}
  .feed-sidebar-right{display:none}
  .admin-layout{grid-template-columns:200px 1fr}
  .landing-grid{grid-template-columns:1fr 360px}
}

/* ── Mobile (≤768px) ── */
@media (max-width:768px){
  :root{--navbar-h:56px;--bottom-nav-h:58px}

  /* ── Navbar: cacher tout sauf logo + burger ── */
  .navbar{padding:0 1rem;gap:0.5rem}
  .navbar-nav,
  .navbar .nav-link,
  .navbar a.nav-link,
  .navbar a.btn{display:none!important}
  
  .bottom-nav{display:block!important}
  body{padding-bottom:var(--bottom-nav-h)}

  /* ── Landing ── */
  .landing-grid{grid-template-columns:1fr;padding:1rem;gap:1.5rem;min-height:unset}
  .auth-panel{position:static;margin-bottom:1rem}
  .landing-tagline{font-size:clamp(1.4rem,6vw,2rem)}

  /* ── Feed ── */
  .feed-layout{grid-template-columns:1fr;padding:0.7rem;gap:0.8rem}
  .feed-sidebar-left,.feed-sidebar-right{display:none}

  /* ── Profile ── */
  .profile-info{flex-direction:column;align-items:flex-start;margin-top:-35px;gap:0.8rem}
  .profile-stats{margin-left:0;gap:1.2rem}
  .profile-cover{height:150px}
  .avatar-xxl{width:88px;height:88px}

  /* ── Messenger ── */
  .messenger-layout{grid-template-columns:1fr;height:calc(100vh - var(--navbar-h) - var(--bottom-nav-h))}
  .contacts-panel{display:none}
  .contacts-panel.show{display:flex;position:fixed;inset:var(--navbar-h) 0 var(--bottom-nav-h) 0;z-index:500}
  .message-bubble{max-width:82%}
  .chat-messages{padding:0.8rem}
  .chat-input-area{padding:0.6rem 0.8rem}

  /* ── Admin ── */
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{display:none;position:fixed;inset:var(--navbar-h) 0 0 0;height:auto;z-index:800;overflow-y:auto}
  .admin-sidebar.open{display:block}
  .admin-content{padding:1rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}

  /* ── Misc ── */
  .modal{width:96%;padding:1.4rem;border-radius:var(--radius-md)}
  .notif-dropdown{width:290px;right:-10px}
  .card{padding:1rem}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .data-table{font-size:0.78rem}
  .data-table th,.data-table td{padding:0.5rem 0.6rem}
}

/* ── Petit mobile (≤480px) ── */
@media (max-width:480px){
  .navbar-brand{font-size:1.1rem;letter-spacing:2px}
  .feed-layout{padding:0.5rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.6rem}
  .stat-card-num{font-size:1.5rem}
  .message-bubble{max-width:88%;font-size:0.84rem}
  .admin-content{padding:0.8rem}
  .landing-grid{padding:0.8rem}
  .card{padding:0.85rem}
}

/* ── Touch targets ── */
@media (hover:none) and (pointer:coarse){
  .btn{min-height:44px}
  .contact-item{min-height:52px}
  .tab-btn{min-height:44px}
  .post-action-btn{min-height:40px;padding:0.4rem 0.6rem}
}
/* ── Protection téléchargement images ── */
img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}