/* ============================= THEME VARIABLES ============================= */
    :root {
      --transition-speed: 0.3s;

      /* Light Theme Palettes */
      --color-light-bg: #ffffff;
      --color-light-text: #242526;
      --color-light-secondary: #f2f3f5;
      --color-light-border: #d7d7d7;
      --color-light-accent: #1da1f3;
      --color-light-danger: #e0245e;
      --color-light-success: #17bf63;
      
      /* Dim Theme Palettes */
      --color-dim-bg: #15202b;
      --color-dim-text: #e9ecef;
      --color-dim-secondary: #1e2732;
      --color-dim-border: #2f3b45;
      --color-dim-accent: #1da1f3;
      --color-dim-danger: #e0245e;
      --color-dim-success: #17bf63;

      /* Dark Theme Palettes */
      --color-dark-bg: #000000;
      --color-dark-text: #e7e9ea;
      --color-dark-secondary: #121212;
      --color-dark-border: #2f3336;
      --color-dark-accent: #1da1f3;
      --color-dark-danger: #e0245e;
      --color-dark-success: #17bf63;
    }

    /* Each theme class picks which palette to use */
    .light-theme {
      --bg: var(--color-light-bg);
      --text: var(--color-light-text);
      --secondary: var(--color-light-secondary);
      --border: var(--color-light-border);
      --accent: var(--color-light-accent);
      --danger: var(--color-light-danger);
      --success: var(--color-light-success);
    }
    .dim-theme {
      --bg: var(--color-dim-bg);
      --text: var(--color-dim-text);
      --secondary: var(--color-dim-secondary);
      --border: var(--color-dim-border);
      --accent: var(--color-dim-accent);
      --danger: var(--color-dim-danger);
      --success: var(--color-dim-success);
    }
    .dark-theme {
      --bg: var(--color-dark-bg);
      --text: var(--color-dark-text);
      --secondary: var(--color-dark-secondary);
      --border: var(--color-dark-border);
      --accent: var(--color-dark-accent);
      --danger: var(--color-dark-danger);
      --success: var(--color-dark-success);
    }

    /* ============================= GLOBAL STYLES ============================= */
    * {
      margin: 0; 
      padding: 0; 
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding-bottom: 50px;
      line-height: 1.5;
      transition: background var(--transition-speed), color var(--transition-speed);
    }
    a {
      color: var(--accent);
      text-decoration: none;
      line-break: anywhere;
    }
    a:hover {
      text-decoration: underline;
    }
    button {
      cursor: pointer;
      transition: background 0.2s, border 0.2s;
      border: none;
    }
    .postText pre {
      padding-top: 10px;
      padding-bottom: 15px;
      line-height: 1.2;
    }
    code {
      color: #53979a;
      font-size: 0.9rem;
    }
    p {
      padding-bottom: 10px;
      /* word-break: break-all; */
      overflow-wrap: break-word;
    }
    p img {
      max-width: 30vw;
      height: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
    }
    i {
      color: var(--text);
    }
    ol, ul {
      padding-left: 25px;
      padding-bottom: 10px;
    }
    .postText h1,
    .postText h2,
    .postText h3,
    .postText h4 {
      padding: 10px 0;
    }

    /* ============================= LOADER ============================= */
    #loader {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(255,255,255,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .dim-theme #loader,
    .dark-theme #loader {
      background: rgba(0,0,0,0.7);
    }
    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid var(--accent);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ============================= TOP BAR & NAV ============================= */
    #topBar {
      background: var(--secondary);
      color: var(--text);
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      transition: background var(--transition-speed), color var(--transition-speed);
      z-index: 100;
    }
    #topBar h1 {
      font-size: 18px;
      font-weight: 600;
    }
    @media (max-width: 768px) {
      #topBar h1 {
        display: none;
      }
    }
    /* Theme Toggle Container */
    .themeToggle {
      position: absolute;
      right: 200px; 
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.9rem;
    }
    .themeToggle select {
      background: var(--secondary);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 4px 10px;
      border-radius: 6px;
      outline: none;
    }
    .connectSection {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .connectSection button {
      background: var(--accent);
      color: #fff;
      padding: 6px 12px;
      font-weight: 600;
      border-radius: 20px;
    }
    .connectSection button:hover {
      background: #1387c7; /* slightly darker accent on hover */
    }
    #logoutBtn {
      background: var(--danger);
      color: #fff;
      border-radius: 20px;
      padding: 6px 12px;
      font-weight: 600;
    }
    #logoutBtn:hover {
      background: #b91b4b;
    }

    /* ============================= MAIN LAYOUT ============================= */
    #layout {
      display: grid;
      justify-content: center;
      grid-template-columns: 20vw 50vw 20vw; /* narrower sidebars, more main content */
      gap: 20px;
      padding: 20px;
      margin-top: 1px;
    }
    .navMenuDiv {
      display: block;
    }
    @media (max-width: 1200px) {
      #topBar {
        justify-content: flex-start;
      }
      #layout {
        grid-template-columns: 1fr;
      }
      #mainContent {
        max-height: 80vh;
        overflow-y: auto;
      }
      #rightSide {
        max-height: 100%;
        overflow-y: auto;
      }
      .navMenuDiv {
        display: flex;
        justify-content: center;
        gap: normal;
      }
    }
    @media (max-width: 768px) {
      .navMenuDiv {
        display: block;
      }
    }
    /* ============================= SIDEBAR NAVIGATION ============================= */
    #sidebar {
      background: var(--secondary);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
      transition: background var(--transition-speed), color var(--transition-speed);
      height: max-content;
    }
    #sidebar a {
      display: block;
      padding: 10px;
      border-radius: 8px;
      color: var(--text);
      transition: background 0.2s;
      font-weight: 500;
      text-decoration: none;
    }
    #sidebar a:hover {
      background: var(--border);
      color: var(--text);
    }

    /* ============================= MAIN CONTENT & RIGHT SIDEBAR ============================= */
    #mainContent, 
    #rightSide {
      background: var(--secondary);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      transition: background var(--transition-speed), color var(--transition-speed);
    }

    /* ============================= SEARCH SECTION ============================= */
    #searchSection {
      margin-bottom: 20px;
    }
    #searchSection label {
      font-weight: 600;
      margin-bottom: 8px;
      display: block;
    }
    #searchInput {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 20px;
      margin-bottom: 10px;
      font-size: 1rem;
      background: var(--bg);
      color: var(--text);
      text-align: center;
    }
    #searchBtn {
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 10px 16px;
      font-weight: 600;
      border-radius: 20px;
      width: 100%;
    }
    #searchBtn:hover {
      background: #1387c7;
    }

    /* ============================= PANELS ============================= */
    .panel {
      background: var(--bg);
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      transition: background var(--transition-speed), color var(--transition-speed);
    }
    .panel h2, .panel h3 {
      padding-bottom: 10px;
    }
    .panel input, .panel textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 1rem;
      background: var(--secondary);
      color: var(--text);
      transition: background var(--transition-speed), color var(--transition-speed);
    }
    .panel button {
      height: 40px;
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 10px 17px;
      font-weight: 600;
      border-radius: 17px;
      cursor: pointer;
      transition: background 0.2s;
      margin-top: 10px;
    }
    .panel button:hover {
      background: #1387c7;
    }

    /* ============================= SETTINGS UPDATE ROWS ============================= */
    .updateRow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .updateRow label {
      min-width: 120px;
      font-weight: 500;
    }
    .updateRow input, .updateRow textarea {
      width: 70%;
    }
    .updateRow button {
      margin-top: 0;
    }

    /* ============================= MESSAGE BOX ============================= */
    #messageBox {
      position: relative;
      display: none;
      text-align: center;
      padding: 15px 20px;
      border-radius: 15px;
      color: #fff;
      font-weight: 600;
      z-index: 1000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      align-items: center;
      margin-bottom: 20px;
    }
    #messageCloseBtn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #fff;
      color: #000;
      padding: 5px 10px;
      border-radius: 50%;
      font-size: 15px;
      font-weight: bold;
    }

    /* ============================= POST ITEMS ============================= */
    .postItem {
      background: var(--secondary);
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 15px;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.2s, transform 0.2s, border 0.2s;
    }
    .postItem:hover {
      background: var(--bg);
      transform: translateY(-2px);
    }
    .postHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .authorInfo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .authorDetails {
      display: flex;
      flex-direction: column;
    }
    .authorName {
      font-size: large;
      font-weight: 600;
      color: var(--accent);
    }
    .postDate {
      font-size: medium;
      color: var(--text);
      opacity: 0.7;
    }
    .postText {
      margin: 7px 0;
      padding: 7px;
      font-size: medium;
    }
    @media (max-width: 1200px) {
      .postText {
        font-size: small;
      }
    }
    #postPage .postText p {
      white-space: pre-wrap;
    }
    .statsLine {
      font-size: 0.9rem;
      opacity: 0.75;
      margin-top: 8px;
    }

    .reactionRow {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .reactionRow a:hover {
      text-decoration: none;
    }
    .reactionBtn {
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 20px;
      background: var(--bg);
      border: 1px solid var(--border);
      transition: background 0.2s;
      font-size: 0.9rem;
      text-align: center;
    }
    .reactionBtn:hover {
      background: var(--secondary);
    }

    /* Post Options (edit/hide/pin, etc.) */
    .postOptions {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .postOptions button, .postHiddenMessage button, .activityItem button, .genBtn {
      height: auto !important;
      background: var(--accent);
      color: #fff;
      border-radius: 20px;
      padding: 5px 15px !important;
      font-size: 0.85rem;
    }
    .postHiddenMessage button {
      margin-top: 10px;
    }
    .postOptions button:hover {
      background: #1387c7;
    }
    .postHiddenMessage button:hover {
      background: #1387c7;
    }
    .readMore {
      font-weight: bold;
    }

    /* ============================= COMMENT BOX ============================= */
    #commentBox {

    }
    #commentText {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 12px;
      background: var(--secondary);
      color: var(--text);
    }

    /* Make the comments panel scrollable for infinite loading */
    /* You can remove these if you want full-page scroll for comments: 
    #commentsPanel {
      overflow-y: auto; 
      max-height: 50vh;
    }
    */

    /* ============================= FALLBACKS & AVATARS ============================= */
    #myProfileAvatar {
      background: var(--border);
    }
    .coverFallback {
      background: var(--border);
      width: 100%;
      height: 220px;
      border-radius: 12px;
    }
    .avatarContainer img, .avatarContainer .avatarFallback {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .avatarFallback {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--border);
      color: #fff;
      font-weight: 700;
      font-size: 1.9rem;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .postAvatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--border);
      background: var(--border);
    }

    /* ============================= PROFILE HEADER ============================= */
    #profileHeader {
      background: var(--bg);
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .coverContainer {
      position: relative;
    }
    #coverPhoto, #myCoverPhoto {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 12px;
    }
    .avatarContainer {
      position: absolute;
      bottom: -50px;
      left: 20px;
      width: 100px;
      height: 100px;
      border: 3px solid var(--bg);
      border-radius: 50%;
      overflow: hidden;
      background: var(--border);
    }
    #nicknameLine, #myNicknameLine {
      margin-top: 55px;
      margin-bottom: 5px;
      padding-bottom: 0;
      font-size: 1.3rem;
      font-weight: 700;
    }
    #usernameLine, #bioLine, #locationLine, #websiteLine, #joinedDate,
    #myUsernameLine, #myBioLine, #myLocationLine, #myWebsiteLine, #myStats {
      color: var(--text);
      margin-top: 7px;
      font-size: 0.95rem;
      opacity: 0.9;
    }
    #bioLine, #myBioLine {
      padding-bottom: 0;
    }
    #followBtn {
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 8px 14px;
      font-weight: 600;
      border-radius: 20px;
      margin-top: 12px;
    }
    #followBtn:hover {
      background: #1387c7;
    }
    #followerStats {
      margin-top: 8px;
      font-size: 0.95rem;
      opacity: 0.8;
    }

    /* ============================= CREATE POST PANEL ============================= */
    #createPostPanel textarea {
      background: var(--secondary);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 12px;
    }

    /* ============================= PINNED POST ============================= */
    #userPinnedPanel, #myPinnedPostPanel {
      display: none;
      margin-bottom: 20px;
    }

    /* ============================= PROFILE TABS ============================= */
    .profileTabs {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      border-bottom: 2px solid var(--border);
    }
    .profileTabs button {
      flex: 1;
      padding: 10px;
      background: none;
      color: var(--text);
      cursor: pointer;
      border: none;
      transition: background 0.2s;
      font-size: 15px;
    }
    .profileTabs button:hover {
      background: var(--secondary);
    }
    .profileTabs button.activeTab {
      color: var(--accent);
      border-bottom: 3px solid var(--accent);
      font-weight: 600;
    }
    .shareProfileButton {
      height: auto;
      position: absolute;
      top: 10px;
      right: 10px;
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 5px 10px;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 600;
    }

    /* ============================= ROUTE PAGES ============================= */
    .routePage {
      display: none;
    }
    #editPostPage, #editCommentPage, #repostPage {
      padding: 20px;
    }
    #editPostPage textarea, #editCommentPage textarea, #repostPage textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 1rem;
      background: var(--secondary);
      color: var(--text);
    }

    /* ============================= QUOTED / REPOSTED FRAME ============================= */
    .quotedFrame {
      border-left: 4px solid var(--accent);
      margin: 10px 0 15px 0;
      padding: 10px;
      background: var(--secondary);
    }
    .repostBlock p {
      padding-bottom: 5px;
    }

    /* ============================= SHARE MODAL ============================= */
    #shareModal {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #shareModal .modal-overlay {
      position: absolute;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
    }
    #shareModal .modal-content {
      position: relative;
      background: var(--bg);
      padding: 10px 20px 20px;
      border-radius: 8px;
      z-index: 10001;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 220px;
      border: 1px solid var(--border);
    }
    #shareModal .modal-content h3 {
      margin-bottom: 10px;
      font-size: 1rem;
      color: var(--accent);
    }
    #shareModal .modal-content button {
      margin: 5px 0;
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.2s;
    }
    #shareModal .modal-content button:hover {
      background: #1387c7;
    }
    #shareModal .close-modal {
      position: absolute;
      top: 5px; right: 5px;
      border: none; 
      cursor: pointer;
      font-size: 17px;
      background: none !important;
      color: var(--danger) !important;
      font-weight: bold;
    }
    #shareModal .close-modal:hover {
      color: var(--accent);
    }
    .share-buttons {
      display: grid;
    }

    /* ============================= REACTION HIGHLIGHT ============================= */
    .highlight {
      background: var(--accent) !important;
    }

    /* ============================= ADDITIONAL CLASSES ============================= */
    .activityItem {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--secondary);
    }
    .activityItem:hover {
      background: var(--bg);
      transform: translateY(-2px);
    }
    .activityItem p {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .postHiddenMessage {
      background: var(--secondary);
      padding: 10px;
      font-style: italic;
      opacity: 0.8;
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-top: 10px;
    }
    .recentUser, .officialUser {
      padding: 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .recentUser a, .officialUser a {
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:inherit;
    }
    .resources-section {
      display: grid;
      gap: 20px;
    }
    .resources-section h3 {
      grid-column: 1 / -1;
    }
    .resource-category {
      
    }
    .resource-category h3, #recentlyJoinedPanel h3, #statsPanel h3 {
      color: var(--accent);
      font-weight: 600;
    }
    #statsPanel strong {
       font-weight: 600;
     }
    .resource-category a {
      padding: 2px 8px;
      border-radius: 5px;
      text-decoration: none;
      color: var(--text);
      transition: background 0.2s, transform 0.2s;
      text-align: center;
      margin: 0 3px;
      line-break: auto;
    }
    .resource-category a:hover {
      background: var(--accent);
      color: #fff;
      transform: translateY(-1px);
      border-radius: 15px;
    }

    /* Make user/my comments scrollable for infinite load: */
    #userCommentsFeed,
    #myCommentsFeed {
      max-height: 450px;
      overflow-y: auto;
    }

    /* ============================= FOOTER ============================= */
    footer {
      position: fixed;
      bottom: 0; left: 0;
      width: 100%;
      background: var(--secondary);
      color: var(--text);
      text-align: center;
      padding: 10px;
      font-size: 0.9rem;
      z-index: 99;
      transition: background var(--transition-speed), color var(--transition-speed);
    }
    @media (max-width: 768px) {
      footer {
        position: static;
      }
    }