@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ==========================================================================
   NexusNet Modern Theme & Modal Design System
   ========================================================================== */

:root {
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  
  --accent-primary: #2563eb;
  --accent-hover: #3b82f6;
  --accent-subtle: rgba(37, 99, 235, 0.15);
  
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border-color: #1f2937;
  --danger: #ef4444;
  --card-radius: 12px;
  --max-width: 1200px;
}

/* Universal Typography & Style Reset */
*, *::before, *::after, input, button, textarea, select, a {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Link Resets */
a, a:visited {
  color: var(--accent-hover);
  text-decoration: none;
}
a:hover {
  color: var(--text-primary);
}

/* Top App Header */
.app-header {
  height: 60px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-brand a {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-hover) !important;
}

/* App Grid Constraints */
.app-layout {
  display: flex;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: calc(100vh - 60px);
}

/* Navigation Sidebar */
.sidebar {
  width: 220px;
  min-width: 220px;
  padding: 20px 12px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--bg-primary);
  flex-shrink: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.nav-item:hover, .nav-item.active {
  background-color: var(--accent-subtle);
  color: var(--accent-hover) !important;
}

/* Center Content Area */
.main-content {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--border-color);
  padding: 24px;
}

/* Right Sidebar (Clean & Empty) */
.right-panel {
  width: 300px;
  min-width: 300px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

/* Cards & Posts */
.post-card, .profile-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 20px;
  margin-bottom: 16px;
  width: 100%;
}

.post-header, .profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

.avatar-lg {
  width: 72px;
  height: 72px;
}

.post-user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.display-name {
  font-weight: 700;
  color: var(--text-primary);
}

.username-handle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.post-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.post-body {
  color: var(--text-primary);
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.empty-state {
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  border-radius: var(--card-radius);
  border: 1px dashed var(--border-color);
}

/* Form Controls & Buttons */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.form-control, input[type="text"], input[type="password"], textarea, select {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--accent-hover);
}

.btn {
  width: fit-content;
  font-weight: 600;
  background-color: var(--accent-primary);
  color: #ffffff !important;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: var(--accent-hover);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary) !important;
}

/* Auth Page */
.auth-container {
  max-width: 400px;
  margin: 60px auto;
  padding: 32px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-header h1 {
  color: var(--accent-hover);
  margin-bottom: 6px;
}

/* Floating Plus Button */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  color: white;
  font-size: 28px;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 100;
}

.fab:hover {
  background-color: var(--accent-hover);
  transform: scale(1.08);
}

/* Smooth Create Post Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1000;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  width: 90%;
  max-width: 520px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.close-btn {
  background: transparent !important;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary) !important;
  cursor: pointer;
  padding: 0 4px;
}

#modal-content {
  width: 100%;
  height: 120px;
  margin-bottom: 16px;
  resize: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

/* Screen Sizing Rules */
@media (max-width: 992px) {
  .right-panel { display: none; }
}

@media (max-width: 768px) {
  .app-layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 12px;
  }
  .main-content { border-right: none; padding: 16px; }
}


.nav-item svg,
.fab svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  flex-shrink: 0;
}

.fab svg {
  width: 26px;
  height: 26px;
}


.post-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.icon-btn:hover {
  color: var(--danger);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}


.post-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-time {
  order: 2;
}

.report-btn {
  order: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.report-btn svg {
  width: 15px;
  height: 15px;
}

.report-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}


.post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.report-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.report-icon:hover {
  background: var(--accent-subtle);
  color: var(--danger);
}

.report-icon svg {
  width: 16px;
  height: 16px;
}


#report-modal .modal-card {
  width: 90%;
  max-width: 520px;
  min-height: 280px;
}

#report-content {
  min-height: 160px;
  resize: vertical;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.report-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
}

.report-icon:hover {
  color: var(--danger);
  background: var(--accent-subtle);
}

.report-icon svg {
  width: 16px;
  height: 16px;
}


.icon-action {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-color) !important;
  outline: none;
  padding: 0;
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.icon-action:focus,
.icon-action:active {
  outline: none;
  box-shadow: none;
}

.icon-action svg {
  pointer-events: none;
}


.post-footer {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.icon-action {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.icon-action:hover {
  background: var(--accent-subtle) !important;
  color: var(--accent-hover) !important;
}

.icon-action svg {
  width: 20px;
  height: 20px;
}

/* Username interaction */
.display-name,
.username-handle,
.post-user-info a,
.comment-name {
  color:#ffffff;
  text-decoration:none !important;
  transition:
    color .25s ease,
    text-shadow .25s ease;
  cursor:pointer;
}

.display-name:hover,
.username-handle:hover,
.post-user-info a:hover,
.comment-name:hover {
  color:#00aaff;
  text-decoration:none !important;
  text-shadow:0 0 8px rgba(0,170,255,.55);
}


/* Comments */
.comments-overlay {
  position:fixed;
  inset:0;
  background:transparent;
  backdrop-filter:none;
  z-index:1000;
}

.comments-window {
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:min(450px,100%);
  background:#0b1220;
  display:flex;
  flex-direction:column;
  box-shadow:-10px 0 30px rgba(0,0,0,.4);
}

.comments-list {
  flex:1;
  overflow-y:auto;
  padding:18px;
}

.comment-item {
  display:flex;
  gap:10px;
  background:#172033;
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}

.comment-avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
}

.comment-name {
  font-weight:700;
}

.empty-comments {
  text-align:center;
  color:#9ca3af;
  padding:30px;
}

.close-btn {
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.close-btn:hover {
  background:rgba(255,255,255,.1);
}


/* Comments panel */
.comments-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index:1000;
}

.comments-overlay.open {
  opacity:1;
  visibility:visible;
}

.comments-window {
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(450px,100%);
  background:#0b1220;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
}

.comments-overlay.open .comments-window {
  transform:translateX(0);
}


/* Comment usernames */
.comments-window .comment-name,
.comments-window .comment-name:visited {
  color:#ffffff !important;
  text-decoration:none !important;
  text-shadow:none;
  transition:
    color .25s ease,
    text-shadow .25s ease;
}

.comments-window .comment-name:hover {
  color:#00aaff !important;
  text-decoration:none !important;
  text-shadow:0 0 8px rgba(0,170,255,.55);
}


/* Comment avatar */
.comment-avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
}


/* FINAL USER HOVER FIX */
html body .display-name,
html body .username-handle,
html body .post-user-info a,
html body .comment-name,
html body .comment-name:visited {
    color:#ffffff !important;
    text-decoration:none !important;
    text-shadow:none !important;
    transition:color .25s ease, text-shadow .25s ease !important;
    cursor:pointer;
}

html body .display-name:hover,
html body .username-handle:hover,
html body .post-user-info a:hover,
html body .comment-name:hover {
    color:#00aaff !important;
    text-decoration:none !important;
    text-shadow:0 0 8px rgba(0,170,255,.55) !important;
}


/* NexusNet username neon hover */
html body .display-name,
html body .username-handle,
html body .post-user-info a,
html body .comment-name {
    color:#ffffff !important;
    text-decoration:none !important;
    cursor:pointer;
    display:inline-block;
    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .2s ease !important;
}

html body .display-name:hover,
html body .username-handle:hover,
html body .post-user-info a:hover,
html body .comment-name:hover {
    color:#00aaff !important;
    text-decoration:none !important;
    text-shadow:
        0 0 5px rgba(0,170,255,.45),
        0 0 12px rgba(0,170,255,.35) !important;
    transform:scale(1.05);
}

/* ===== NexusNet Final Username Hover ===== */
.post-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.display-name,
.username-handle,
.post-user-info a,
.comment-name {
  color: #fff !important;
  text-decoration: none !important;
  display: inline-block;
  width: fit-content;
  transform-origin: left center;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .18s ease !important;
}

.display-name:hover,
.username-handle:hover,
.post-user-info a:hover,
.comment-name:hover {
  color: #7dd3fc !important;
  text-shadow:
    0 0 6px rgba(125,211,252,.65),
    0 0 14px rgba(59,130,246,.45),
    0 0 24px rgba(37,99,235,.30) !important;
  transform: translateY(-1px);
}
/* ===== End NexusNet Final Username Hover ===== */



/* ===== NexusNet Premium Comments UI ===== */

.comments-window {
  background:
    linear-gradient(180deg, rgba(17,24,39,.98), rgba(11,18,32,.98));
  border-left: 1px solid rgba(255,255,255,.08);
}

.comments-header {
  height: 70px;
  padding: 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.comments-header h2 {
  font-size:1.25rem;
  font-weight:700;
  color:#f9fafb;
}

.comments-header button {
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.06);
  color:#9ca3af;
  font-size:24px;
  cursor:pointer;
  transition:.2s ease;
}

.comments-header button:hover {
  background:rgba(59,130,246,.18);
  color:#fff;
}


.comments-list {
  padding:20px;
  overflow-y:auto;
}


.comment-item {
  display:flex;
  gap:12px;
  padding:14px;
  margin-bottom:14px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
  transition:.2s ease;
}

.comment-item:hover {
  transform:translateX(-4px);
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.25);
}


.comment-avatar {
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}


.comment-item p {
  margin-top:5px;
  color:#d1d5db;
  line-height:1.45;
  word-break:break-word;
}


.comments-input {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(11,15,25,.75);
  backdrop-filter:blur(10px);
}


.comments-input input {
  flex:1;
  height:42px;
  border-radius:22px;
  padding:0 18px;
  background:#111827;
  border:1px solid rgba(255,255,255,.08);
  color:white;
}


.comments-input input:focus {
  border-color:#3b82f6;
  box-shadow:0 0 12px rgba(59,130,246,.25);
}


.comments-input button {
  height:42px;
  padding:0 18px;
  border-radius:22px;
  border:none;
  background:#2563eb;
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
}

.comments-input button:hover {
  background:#3b82f6;
  box-shadow:0 0 18px rgba(59,130,246,.35);
}


.empty-comments {
  padding:50px 20px;
  text-align:center;
  color:#9ca3af;
}



/* ===== NexusNet Cinematic Comments Animation ===== */

.comments-overlay {
  opacity:0;
  visibility:hidden;
  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.comments-overlay.open {
  opacity:1;
  visibility:visible;
}


.comments-window {
  transform:translateX(-120%);
  opacity:.7;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    opacity .35s ease;
}


.comments-overlay.open .comments-window {
  transform:translateX(0);
  opacity:1;
}


/* Closing animation */
.comments-overlay:not(.open) .comments-window {
  transform:translateX(120%);
  opacity:.7;
}



/* ===== NexusNet Center Comments Motion ===== */

.comments-window {
  position: fixed;
  left:50%;
  top:50%;
  right:auto;
  height:min(85vh,900px);
  width:min(460px,95%);
  transform:translate(-160%, -50%);
  opacity:0;
  border-radius:22px;
  overflow:hidden;
  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    opacity .5s ease;
}


.comments-overlay.open .comments-window {
  transform:translate(-50%, -50%);
  opacity:1;
}


.comments-overlay:not(.open) .comments-window {
  transform:translate(160%, -50%);
  opacity:0;
}



/* ===== NexusNet Large Comments Window ===== */

.comments-window {
  width:min(650px,92%);
  height:min(90vh,950px);
  border-radius:26px;
}


.comments-list {
  padding:24px;
}


.comment-item {
  padding:16px;
  border-radius:18px;
}


.comment-avatar {
  width:48px;
  height:48px;
}


.comments-input {
  padding:20px;
}


.comments-input input {
  height:48px;
  font-size:1rem;
}


.comments-input button {
  height:48px;
  padding:0 22px;
}



/* ===== NexusNet Verified Admin Badge ===== */

.verified-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  margin-left:5px;
  border-radius:50%;
  background:#2563eb;
  color:white;
  font-size:11px;
  font-weight:800;
  line-height:1;
  vertical-align:middle;
  box-shadow:
    0 0 8px rgba(37,99,235,.65),
    0 0 16px rgba(59,130,246,.35);
}



/* ===== Lucide Verified Shield Badge ===== */

.verified-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:5px;
  color:#3b82f6;
  vertical-align:middle;
  filter:drop-shadow(0 0 6px rgba(59,130,246,.7));
}

.verified-badge svg {
  width:17px;
  height:17px;
  stroke-width:2.5;
}


.verified-badge,
.verified-badge svg {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.verified-badge {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.verified-badge svg {
  background: transparent !important;
}


/* Cleaner profile header layout */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-header .profile-avatar {
  flex-shrink: 0;
}

.profile-header .profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-header .display-name {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.profile-header .username,
.profile-header .username-handle {
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: left;
  margin-top: 3px;
}


/* Match profile identity layout with post headers */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-header > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-header .display-name {
  margin: 0;
  line-height: 1.15;
  text-align: left;
}

.profile-header .username-handle {
  font-size: 0.85rem;
  margin-top: 3px;
  text-align: left;
  opacity: 0.7;
}


.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-identity .display-name {
  margin: 0;
}

.profile-bio {
  margin-top: 16px;
  line-height: 1.5;
}


/* Profile banner */
.profile-card {
  overflow: hidden;
  padding: 0;
}

.profile-banner {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #111827;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.profile-header {
  padding: 18px;
  margin-top: -54px;
  position: relative;
  z-index: 2;
  align-items: flex-end;
}

.profile-header .avatar-lg {
  width: 108px;
  height: 108px;
  border: 4px solid var(--surface, #0b1220);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.profile-info {
  padding-bottom: 8px;
}

/* ===== NexusNet 2026 Trend Layer ===== */

:root {
  --bg-primary:#070b14;
  --bg-secondary:#0d1526;
  --bg-tertiary:#162238;
  --accent-primary:#4f8cff;
  --accent-hover:#79a9ff;
  --accent-glow:rgba(79,140,255,.35);
  --border-color:rgba(255,255,255,.08);
  --card-radius:18px;
}

body {
  background:
    radial-gradient(circle at top left, rgba(79,140,255,.15), transparent 35%),
    radial-gradient(circle at bottom right, rgba(37,99,235,.12), transparent 40%),
    var(--bg-primary);
}

.post-card,
.profile-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  transition:.25s ease;
}

.post-card:hover {
  transform:translateY(-3px);
  border-color:rgba(79,140,255,.35);
  box-shadow:
    0 25px 60px rgba(0,0,0,.35),
    0 0 25px rgba(79,140,255,.12);
}

.nav-item {
  border-radius:14px;
  transition:.2s ease;
}

.nav-item:hover,
.nav-item.active {
  transform:translateX(4px);
  background:rgba(79,140,255,.12);
}

.btn {
  background:linear-gradient(135deg,#4f8cff,#2563eb);
  border-radius:14px;
  box-shadow:0 8px 25px rgba(37,99,235,.25);
  transition:.2s ease;
}

.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 35px rgba(37,99,235,.4);
}

.display-name,
.username-handle,
.comment-name {
  transition:
    transform .25s cubic-bezier(.16,1,.3,1),
    color .25s ease,
    filter .25s ease !important;
}

.display-name:hover,
.username-handle:hover,
.comment-name:hover {
  color:#8ec5ff !important;
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 0 10px rgba(79,140,255,.8));
}

.sidebar {
  background:rgba(13,21,38,.65);
  backdrop-filter:blur(20px);
}

.profile-banner {
  height:260px;
  mask-image:linear-gradient(to bottom,black 75%,transparent);
}


/* ===== NexusNet Social App Redesign ===== */

body {
    background:
      radial-gradient(
        900px circle at 10% -10%,
        rgba(59,130,246,.18),
        transparent 45%
      ),
      radial-gradient(
        700px circle at 90% 100%,
        rgba(14,165,233,.12),
        transparent 45%
      ),
      #050816;
}


/* Floating app layout */
.app-layout {
    gap:20px;
    padding:20px;
}


/* Modern glass panels */
.sidebar,
.right-panel,
.post-card,
.profile-card {
    background:
      rgba(15,23,42,.72);

    backdrop-filter:
      blur(24px);

    border:
      1px solid rgba(255,255,255,.07);

    box-shadow:
      0 20px 60px rgba(0,0,0,.25);
}


/* Sidebar pill navigation */
.nav-item {
    margin:4px 0;
    border-radius:16px;
    padding:14px 18px;
}

.nav-item.active {
    background:
      linear-gradient(
        135deg,
        rgba(59,130,246,.25),
        rgba(14,165,233,.15)
      );

    box-shadow:
      inset 0 0 20px rgba(59,130,246,.15);
}


/* Posts */
.post-card {
    overflow:hidden;
    position:relative;
}


.post-card::before {
    content:"";
    position:absolute;
    inset:0;

    background:
      linear-gradient(
        120deg,
        rgba(255,255,255,.05),
        transparent 40%
      );

    pointer-events:none;
}


.post-card:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(96,165,250,.4);
}


/* Better avatars */
.avatar {
    border:
      2px solid rgba(255,255,255,.15);

    box-shadow:
      0 8px 25px rgba(0,0,0,.35);
}


/* Modern action buttons */
.icon-action {
    width:42px;
    height:42px;

    background:
      rgba(255,255,255,.05) !important;

    border-radius:50%;

    transition:
      transform .2s ease,
      background .2s ease;
}


.icon-action:hover {
    transform:
      translateY(-3px)
      scale(1.08);

    background:
      rgba(59,130,246,.25) !important;
}


/* Better create button */
.fab {
    width:64px;
    height:64px;

    background:
      linear-gradient(
        135deg,
        #60a5fa,
        #2563eb
      );

    box-shadow:
      0 15px 45px rgba(37,99,235,.45);
}


.fab:hover {
    transform:
      scale(1.12)
      rotate(5deg);
}


/* Profile card */
.profile-card {
    border-radius:26px;
}


.profile-banner {
    height:280px;
}


.profile-header .avatar-lg {
    width:120px;
    height:120px;

    border:
      5px solid #050816;
}


/* Inputs */
.form-control,
input,
textarea {
    background:
      rgba(255,255,255,.05) !important;

    border:
      1px solid rgba(255,255,255,.1) !important;

    border-radius:16px !important;
}


.form-control:focus,
input:focus,
textarea:focus {
    box-shadow:
      0 0 25px rgba(59,130,246,.25);

    border-color:
      #60a5fa !important;
}


/* smoother scrolling */
* {
    scrollbar-width:thin;
    scrollbar-color:#334155 transparent;
}




/* NexusNet Sticker Button */
.nexus-sticker-fab{
    position:fixed;
    right:24px;
    bottom:90px;
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    background:#111827;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    transition:.2s ease;
    z-index:900;
}

.nexus-sticker-fab:hover{
    transform:scale(1.1) rotate(-8deg);
    box-shadow:0 0 25px rgba(59,130,246,.5);
}


/* ===== NexusNet Sticker System ===== */

.nexus-sticker-fab{

    position:fixed;

    right:24px;

    bottom:155px;

    width:52px;
    height:52px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    background:#111827;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:999;

    transition:.2s ease;

}


.nexus-sticker-fab:hover{

    transform:scale(1.1) rotate(-8deg);

    box-shadow:
    0 0 25px rgba(59,130,246,.5);

}



#sticker-picker{

    position:fixed;

    background:transparent;

    backdrop-filter:none;

    display:none;

    z-index:2000;

}


#sticker-picker.open{

    display:flex;

    align-items:center;

    justify-content:center;

}



.sticker-panel{

    width:420px;

    max-height:600px;

    background:#111827;

    border-radius:18px;

    padding:20px;

}



#sticker-search{

    width:100%;

    padding:12px;

    border-radius:12px;

    background:#0b1220;

    border:1px solid rgba(255,255,255,.1);

    color:white;

}



#sticker-results{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-top:15px;

}



.picker-sticker{

    width:80px;

    cursor:pointer;

    transition:.2s;

}


.picker-sticker:hover{

    transform:scale(1.1);

}



.homepage-sticker{

    position:fixed;

    width:100px;

    z-index:100;

    cursor:pointer;

    animation:
    stickerPop .35s ease;

}


@keyframes stickerPop{

from{

transform:scale(.2) rotate(-20deg);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}



/* ===== Sticker Picker Final UI ===== */

#sticker-picker{
    position:fixed;
    right:24px;
    bottom:220px;
    display:none;
    z-index:3000;
}

#sticker-picker.open{
    display:block;
}

.sticker-panel{
    width:420px;
    max-height:500px;
    overflow:auto;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.sticker-close{
    float:right;
    cursor:pointer;
    font-size:22px;
    color:white;
}

.placement-preview{
    pointer-events:none;
    opacity:.8;
}

.homepage-sticker{
    position:fixed;
    width:100px;
    cursor:grab;
    user-select:none;
}

.homepage-sticker:active{
    cursor:grabbing;
}



/* FORCE REMOVE STICKER BLUR */
#sticker-picker{
    inset:auto !important;
    right:24px !important;
    bottom:220px !important;
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    backdrop-filter:none !important;
}

#sticker-picker.open{
    display:block !important;
}



/* Sticker final override */

#sticker-picker{

    position:fixed;

    right:24px;

    bottom:220px;

    display:none;

    z-index:9999;

    background:transparent !important;

    backdrop-filter:none !important;

}


#sticker-picker.open{

    display:block;

}


.sticker-panel{

    width:420px;

    background:#111827;

    border-radius:18px;

    padding:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}


.sticker-close{

    float:right;

    background:none;

    border:0;

    color:white;

    font-size:24px;

    cursor:pointer;

}


.homepage-sticker{

    position:fixed;

    width:100px;

    cursor:grab;

    z-index:500;

    user-select:none;

}


.homepage-sticker.placement{

    pointer-events:none;

    opacity:.75;

}



/* ===== Top-level sticker layer ===== */
#sticker-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:300;
}

#sticker-layer .homepage-sticker{
    position:absolute;
    width:100px;
    pointer-events:auto;
    cursor:grab;
}

#sticker-picker{
    background:transparent !important;
    backdrop-filter:none !important;
}

#sticker-picker::before{
    display:none !important;
}

.homepage-sticker.placement{
    pointer-events:none;
    opacity:.85;
}