*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --fb-blue: #1877F2;
    --fb-blue-hover: #166FE5;
    --fb-bg: #F0F2F5;
    --fb-white: #FFFFFF;
    --fb-black: #050505;
    --fb-gray: #65676B;
    --fb-light-gray: #B0B3B8;
    --fb-hover: #E4E6EB;
    --fb-border: #CED0D4;
    --fb-green: #31A24C;
    --fb-red: #E41E3F;
    --fb-card-shadow: 0 1px 2px rgba(0,0,0,0.1);
    --fb-popup-shadow: 0 2px 12px rgba(0,0,0,0.2);
    --font-main: 'Segoe UI', Helvetica, Arial, sans-serif;
  }

  body {
    font-family: var(--font-main);
    background: var(--fb-bg);
    color: var(--fb-black);
    line-height: 1.34;
    -webkit-font-smoothing: antialiased;
  }

  a { text-decoration: none; color: inherit; }
  button { cursor: pointer; font-family: var(--font-main); border: none; background: none; }
  input { font-family: var(--font-main); }

  /* ========== AUTH PAGES (Login / Signup / Forgot) ========== */
  .auth-page {
    display: none;
    min-height: 100vh;
    background: var(--fb-bg);
  }
  .auth-page.active { display: flex; }

  .auth-container {
    display: flex;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 72px 16px;
    gap: 32px;
    align-items: flex-start;
  }

  .auth-left {
    flex: 1;
    padding-top: 40px;
    max-width: 500px;
  }
  .auth-left h1 {
    font-size: 56px;
    font-weight: 700;
    color: var(--fb-blue);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -1.5px;
  }
  .auth-left p {
    font-size: 24px;
    color: var(--fb-black);
    line-height: 1.3;
    font-weight: 400;
  }

  .auth-right {
    width: 396px;
    flex-shrink: 0;
  }

  .auth-card {
    background: var(--fb-white);
    border-radius: 8px;
    box-shadow: var(--fb-popup-shadow);
    padding: 20px 20px 24px;
    margin-bottom: 16px;
  }

  .auth-card input[type="text"],
  .auth-card input[type="password"],
  .auth-card input[type="email"],
  .auth-card input[type="tel"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--fb-border);
    border-radius: 6px;
    font-size: 17px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--fb-black);
    background: #F5F6F7;
  }
  .auth-card input:focus {
    border-color: var(--fb-blue);
    box-shadow: 0 0 0 2px #E7F3FF;
    background: var(--fb-white);
  }

  .btn-login {
    width: 100%;
    padding: 12px;
    background: var(--fb-blue);
    color: white;
    font-size: 20px;
    font-weight: 700;
    border-radius: 6px;
    transition: background 0.2s;
    margin-top: 4px;
  }
  .btn-login:hover { background: var(--fb-blue-hover); }

  .btn-signup {
    width: 100%;
    padding: 12px;
    background: #42B72A;
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.2s;
  }
  .btn-signup:hover { background: #36A420; }

  .forgot-link {
    text-align: center;
    margin-top: 16px;
  }
  .forgot-link a {
    color: var(--fb-blue);
    font-size: 14px;
  }
  .forgot-link a:hover { text-decoration: underline; }

  .divider {
    border: none;
    border-top: 1px solid var(--fb-border);
    margin: 20px 0;
  }

  .create-new {
    text-align: center;
  }
  .create-new a {
    display: inline-block;
    padding: 12px 24px;
    background: #42B72A;
    color: white;
    font-size: 17px;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.2s;
  }
  .create-new a:hover { background: #36A420; }

  .back-to-login {
    text-align: center;
    margin-top: 16px;
  }
  .back-to-login a {
    color: var(--fb-blue);
    font-size: 14px;
  }
  .back-to-login a:hover { text-decoration: underline; }

  .gender-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
  }
  .gender-option {
    flex: 1;
    position: relative;
  }
  .gender-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--fb-border);
    border-radius: 6px;
    font-size: 15px;
    color: var(--fb-gray);
    cursor: pointer;
    transition: border-color 0.2s;
    background: #F5F6F7;
    height: 46px;
  }
  .gender-option input[type="radio"] { display: none; }
  .gender-option input[type="radio"]:checked + label {
    border-color: var(--fb-blue);
    background: #E7F3FF;
    color: var(--fb-blue);
  }

  .signup-terms {
    font-size: 11px;
    color: var(--fb-gray);
    margin: 12px 0 16px;
    line-height: 1.4;
  }
  .signup-terms a { color: var(--fb-blue); }
  .signup-terms a:hover { text-decoration: underline; }

  .forgot-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--fb-black);
    margin-bottom: 8px;
  }
  .forgot-desc {
    font-size: 15px;
    color: var(--fb-gray);
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .footer-text {
    font-size: 14px;
    color: var(--fb-gray);
    text-align: center;
    margin-top: 28px;
  }

  /* ========== DASHBOARD ========== */
  .dashboard-page { display: none; }
  .dashboard-page.active { display: block; }

  /* Top Navbar */
  .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--fb-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
  }

  .nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 280px;
  }
  .nav-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-logo i {
    font-size: 28px;
    color: var(--fb-blue);
  }
  .nav-search {
    position: relative;
  }
  .nav-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fb-gray);
    font-size: 14px;
  }
  .nav-search input {
    padding: 8px 16px 8px 36px;
    border: none;
    background: var(--fb-bg);
    border-radius: 20px;
    font-size: 15px;
    width: 240px;
    outline: none;
    color: var(--fb-black);
  }
  .nav-search input:focus {
    background: white;
    box-shadow: 0 0 0 2px var(--fb-blue);
  }

  .nav-center {
    display: flex;
    gap: 4px;
  }
  .nav-tab {
    width: 112px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    color: var(--fb-gray);
    font-size: 22px;
    transition: background 0.2s;
  }
  .nav-tab:hover { background: var(--fb-hover); }
  .nav-tab.active {
    color: var(--fb-blue);
    background: #E7F3FF;
  }
  .nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fb-blue);
    border-radius: 3px 3px 0 0;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 280px;
    justify-content: flex-end;
  }
  .nav-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fb-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--fb-black);
    transition: background 0.2s;
    position: relative;
  }
  .nav-icon-btn:hover { background: #D8DADF; }
  .nav-icon-btn .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--fb-red);
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
  }
  .nav-avatar:hover { border-color: var(--fb-hover); }
  .nav-dropdown {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fb-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--fb-black);
    transition: background 0.2s;
  }
  .nav-dropdown:hover { background: #D8DADF; }

  /* Main Layout */
  .main-wrapper {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 56px;
    min-height: 100vh;
  }

  /* Left Sidebar */
  .left-sidebar {
    width: 280px;
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    padding: 16px 8px 16px 16px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .left-sidebar::-webkit-scrollbar { display: none; }

  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--fb-black);
  }
  .sidebar-item:hover { background: var(--fb-hover); }
  .sidebar-item .icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
  }
  .sidebar-item .icon-wrap.blue { background: var(--fb-blue); }
  .sidebar-item .icon-wrap.green { background: var(--fb-green); }
  .sidebar-item .icon-wrap.orange { background: #F7B928; }
  .sidebar-item .icon-wrap.red { background: var(--fb-red); }
  .sidebar-item .icon-wrap.teal { background: #00A884; }
  .sidebar-item .icon-wrap.purple { background: #9B59B6; }
  .sidebar-item .icon-wrap.pink { background: #E84393; }
  .sidebar-item .icon-wrap.dark { background: #2C3E50; }

  .sidebar-heading {
    font-size: 17px;
    font-weight: 600;
    color: var(--fb-gray);
    padding: 12px 8px 4px;
    margin-top: 8px;
  }
  .sidebar-see-more {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--fb-gray);
    transition: background 0.2s;
  }
  .sidebar-see-more:hover { background: var(--fb-hover); }
  .sidebar-see-more .icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fb-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .sidebar-divider {
    border: none;
    border-top: 1px solid var(--fb-border);
    margin: 8px 8px;
  }

  /* Center Feed */
  .center-feed {
    flex: 1;
    max-width: 680px;
    margin: 16px auto;
    padding: 0 16px;
  }

  /* Stories */
  .stories-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .stories-bar::-webkit-scrollbar { display: none; }
  .story-card {
    min-width: 112px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .story-card:hover { transform: scale(1.02); }
  .story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
  .story-card:hover img { transform: scale(1.05); }
  .story-card .story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
  }
  .story-card .story-avatar {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--fb-blue);
    object-fit: cover;
  }
  .story-card .story-name {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }
  .story-create {
    min-width: 112px;
    height: 200px;
    border-radius: 8px;
    background: var(--fb-white);
    box-shadow: var(--fb-card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 12px;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
  }
  .story-create .create-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fb-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 3px solid var(--fb-white);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }
  .story-create span {
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-black);
    margin-top: 24px;
  }

  /* Create Post Card */
  .create-post-card {
    background: var(--fb-white);
    border-radius: 8px;
    box-shadow: var(--fb-card-shadow);
    padding: 16px;
    margin-bottom: 16px;
  }
  .create-post-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .create-post-top img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  .create-post-input {
    flex: 1;
    padding: 8px 16px;
    background: var(--fb-bg);
    border-radius: 20px;
    font-size: 17px;
    color: var(--fb-gray);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
  }
  .create-post-input:hover { background: #E4E6EB; }
  .create-post-actions {
    display: flex;
    border-top: 1px solid var(--fb-border);
    margin-top: 12px;
    padding-top: 8px;
  }
  .create-post-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 15px;
    font-weight: 600;
    color: var(--fb-gray);
  }
  .create-post-action:hover { background: var(--fb-hover); }
  .create-post-action i { font-size: 20px; }
  .create-post-action .fa-video { color: #F3425F; }
  .create-post-action .fa-images { color: #45BD62; }
  .create-post-action .fa-face-smile { color: #F7B928; }

  /* Post Card */
  .post-card {
    background: var(--fb-white);
    border-radius: 8px;
    box-shadow: var(--fb-card-shadow);
    margin-bottom: 16px;
    overflow: hidden;
  }
  .post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
  }
  .post-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
  }
  .post-header-info { flex: 1; }
  .post-header-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fb-black);
    cursor: pointer;
  }
  .post-header-name:hover { text-decoration: underline; }
  .post-header-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--fb-gray);
  }
  .post-header-meta i { font-size: 12px; }
  .post-more {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--fb-gray);
    transition: background 0.2s;
  }
  .post-more:hover { background: var(--fb-hover); }

  .post-text {
    padding: 0 16px 12px;
    font-size: 15px;
    line-height: 1.4;
    white-space: pre-line;
  }
  .post-text.see-more-text {
    cursor: pointer;
  }
  .post-image {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    cursor: pointer;
    transition: filter 0.2s;
  }
  .post-image:hover { filter: brightness(0.97); }

  .post-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 15px;
    color: var(--fb-gray);
  }
  .post-stats-left {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .reaction-icons {
    display: flex;
    margin-right: 4px;
  }
  .reaction-icons span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-right: -4px;
    border: 2px solid white;
  }
  .reaction-icons .like-icon { background: var(--fb-blue); color: white; z-index: 3; }
  .reaction-icons .love-icon { background: var(--fb-red); color: white; z-index: 2; }
  .reaction-icons .wow-icon { background: #F7B928; color: white; z-index: 1; }

  .post-actions {
    display: flex;
    border-top: 1px solid var(--fb-border);
    margin: 0 16px;
    padding: 4px 0;
  }
  .post-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fb-gray);
    transition: background 0.2s, color 0.2s;
  }
  .post-action-btn:hover { background: #F2F2F2; }
  .post-action-btn.liked { color: var(--fb-blue); }
  .post-action-btn.liked i { color: var(--fb-blue); }
  .post-action-btn i { font-size: 18px; transition: transform 0.2s, color 0.2s; }
  .post-action-btn.liked i { transform: scale(1.15); }

  .post-comments-section {
    border-top: 1px solid var(--fb-border);
    margin: 0 16px;
    padding: 8px 0 12px;
  }
  .comment-input-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
  }
  .comment-input-row img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2px;
  }
  .comment-input-wrap {
    flex: 1;
    background: var(--fb-bg);
    border-radius: 18px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
  }
  .comment-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    outline: none;
    color: var(--fb-black);
  }
  .comment-input-wrap .comment-icons {
    display: flex;
    gap: 4px;
    color: var(--fb-gray);
  }
  .comment-input-wrap .comment-icons i {
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
  }
  .comment-input-wrap .comment-icons i:hover { color: var(--fb-blue); }

  .comment-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    animation: fadeInComment 0.3s ease;
  }
  @keyframes fadeInComment {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .comment-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2px;
  }
  .comment-bubble {
    background: var(--fb-bg);
    border-radius: 18px;
    padding: 8px 12px;
    max-width: 400px;
  }
  .comment-bubble .comment-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-black);
  }
  .comment-bubble .comment-text {
    font-size: 15px;
    color: var(--fb-black);
    line-height: 1.3;
  }
  .comment-actions-row {
    display: flex;
    gap: 12px;
    padding-left: 44px;
    margin-bottom: 4px;
  }
  .comment-actions-row button {
    font-size: 12px;
    font-weight: 600;
    color: var(--fb-gray);
    padding: 2px 4px;
    transition: color 0.2s;
  }
  .comment-actions-row button:hover { color: var(--fb-black); }
  .comment-actions-row .comment-liked { color: var(--fb-blue); }

  /* Right Sidebar */
  .right-sidebar {
    width: 280px;
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    padding: 16px 16px 16px 8px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .right-sidebar::-webkit-scrollbar { display: none; }

  .sponsored-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--fb-gray);
    margin-bottom: 8px;
  }
  .sponsored-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 4px;
  }
  .sponsored-item:hover { background: var(--fb-hover); }
  .sponsored-item img {
    width: 132px;
    height: 132px;
    border-radius: 8px;
    object-fit: cover;
  }
  .sponsored-item-info { flex: 1; }
  .sponsored-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fb-black);
    line-height: 1.2;
  }
  .sponsored-item-meta {
    font-size: 13px;
    color: var(--fb-gray);
    margin-top: 2px;
  }

  .sidebar-divider-r {
    border: none;
    border-top: 1px solid var(--fb-border);
    margin: 12px 0;
  }

  .contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .contact-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--fb-gray);
  }
  .contact-header-icons {
    display: flex;
    gap: 8px;
  }
  .contact-header-icons i {
    font-size: 16px;
    color: var(--fb-gray);
    cursor: pointer;
    transition: color 0.2s;
  }
  .contact-header-icons i:hover { color: var(--fb-black); }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .contact-item:hover { background: var(--fb-hover); }
  .contact-item .contact-avatar-wrap {
    position: relative;
  }
  .contact-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }
  .contact-item .online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fb-green);
    border: 2px solid var(--fb-white);
  }
  .contact-item .contact-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--fb-black);
  }

  .search-contacts {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: none;
    background: var(--fb-bg);
    border-radius: 20px;
    font-size: 15px;
    outline: none;
    margin-bottom: 4px;
    color: var(--fb-black);
    position: relative;
  }
  .search-contacts-wrap {
    position: relative;
    margin-bottom: 4px;
  }
  .search-contacts-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fb-gray);
    font-size: 14px;
  }

  /* Toast */
  .toast-container {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .toast {
    background: var(--fb-white);
    border-radius: 8px;
    box-shadow: var(--fb-popup-shadow);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--fb-black);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    min-width: 240px;
  }
  .toast i { color: var(--fb-green); font-size: 18px; }
  @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }

  /* Create Post Modal */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.8);
    z-index: 200;
    align-items: center;
    justify-content: center;
  }
  .modal-overlay.active { display: flex; }
  .modal-card {
    background: var(--fb-white);
    border-radius: 8px;
    box-shadow: var(--fb-popup-shadow);
    width: 500px;
    max-width: 90vw;
    animation: modalIn 0.2s ease;
  }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-bottom: 1px solid var(--fb-border);
    position: relative;
  }
  .modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fb-black);
  }
  .modal-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fb-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--fb-gray);
    transition: background 0.2s;
  }
  .modal-close:hover { background: #D8DADF; }
  .modal-body { padding: 16px; }
  .modal-body .modal-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .modal-body .modal-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  .modal-body .modal-user .name { font-size: 15px; font-weight: 600; }
  .modal-body .modal-user .privacy {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-gray);
    background: var(--fb-hover);
    padding: 2px 8px;
    border-radius: 4px;
  }
  .modal-body textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    outline: none;
    font-size: 24px;
    color: var(--fb-black);
    resize: none;
    line-height: 1.3;
  }
  .modal-body textarea::placeholder { color: var(--fb-light-gray); }
  .modal-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--fb-border);
    border-radius: 8px;
    margin-top: 12px;
  }
  .modal-extras span { font-size: 15px; font-weight: 600; color: var(--fb-black); }
  .modal-extras-icons { display: flex; gap: 4px; }
  .modal-extras-icons i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .modal-extras-icons i:hover { background: var(--fb-hover); }
  .modal-submit {
    width: 100%;
    padding: 10px;
    background: var(--fb-hover);
    color: var(--fb-light-gray);
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    margin-top: 12px;
    transition: background 0.2s, color 0.2s;
  }
  .modal-submit.has-content { background: var(--fb-blue); color: white; }
  .modal-submit.has-content:hover { background: var(--fb-blue-hover); }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #BCC0C4; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #8A8D91; }

  /* Loading Shimmer */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  /* Responsive - hide sidebars on smaller screens */
  @media (max-width: 1100px) {
    .right-sidebar { display: none; }
  }
  @media (max-width: 900px) {
    .left-sidebar { display: none; }
    .center-feed { max-width: 100%; }
    .nav-center { display: none; }
    .nav-search input { width: 160px; }
  }













                                           /* .dashboard-page */



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
  background: #F0F2F5;
  color: #050505;
  line-height: 1.34;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

img {
  display: block;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
}

.nav-logo i {
  font-size: 28px;
  color: #1877F2;
}

.nav-search {
  position: relative;
}

.nav-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #65676B;
  font-size: 14px;
}

.nav-search input {
  padding: 8px 16px 8px 36px;
  border: none;
  background: #F0F2F5;
  border-radius: 20px;
  font-size: 15px;
  width: 240px;
  outline: none;
  color: #050505;
}

.nav-search input:focus {
  background: #fff;
  box-shadow: 0 0 0 2px #1877F2;
}

.nav-center {
  display: flex;
  gap: 4px;
}

.nav-tab {
  width: 112px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #65676B;
  font-size: 22px;
  position: relative;
  transition: background .2s;
}

.nav-tab:hover {
  background: #E4E6EB;
}

.nav-tab.active {
  color: #1877F2;
  background: #E7F3FF;
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: #1877F2;
  border-radius: 3px 3px 0 0;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
  justify-content: flex-end;
}

.nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E4E6EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #050505;
  transition: background .2s;
  position: relative;
}

.nav-icon:hover {
  background: #D8DADF;
}

.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #E41E3F;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.main {
  display: flex;
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 56px;
  min-height: 100vh;
}

.left {
  width: 280px;
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  padding: 16px 8px 16px 16px;
  overflow-y: auto;
  scrollbar-width: none;
}

.left::-webkit-scrollbar {
  display: none;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: background .2s;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}

.sb-item:hover {
  background: #E4E6EB;
}

.sb-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

.sb-blue {
  background: #1877F2;
}

.sb-green {
  background: #31A24C;
}

.sb-orange {
  background: #F7B928;
}

.sb-red {
  background: #E41E3F;
}

.sb-teal {
  background: #00A884;
}

.sb-purple {
  background: #9B59B6;
}

.sb-pink {
  background: #E84393;
}

.sb-dark {
  background: #2C3E50;
}

.sb-heading {
  font-size: 17px;
  font-weight: 600;
  color: #65676B;
  padding: 12px 8px 4px;
  margin-top: 8px;
}

.sb-more {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #65676B;
  transition: background .2s;
}

.sb-more:hover {
  background: #E4E6EB;
}

.sb-more-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E4E6EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.sb-divider {
  border: none;
  border-top: 1px solid #CED0D4;
  margin: 8px 8px;
}

.center {
  flex: 1;
  max-width: 680px;
  margin: 16px auto;
  padding: 0 16px;
}

.stories {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.stories::-webkit-scrollbar {
  display: none;
}

.story-card {
  min-width: 112px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s;
}

.story-card:hover {
  transform: scale(1.02);
}

.story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%);
}

.story-card .s-avatar {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #1877F2;
  object-fit: cover;
}

.story-card .s-name {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.story-create {
  min-width: 112px;
  height: 200px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.story-create .ci {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1877F2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 3px solid #fff;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.story-create span {
  font-size: 13px;
  font-weight: 600;
  margin-top: 24px;
}

.create-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  padding: 16px;
  margin-bottom: 16px;
}

.create-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-top img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.create-input {
  flex: 1;
  padding: 8px 16px;
  background: #F0F2F5;
  border-radius: 20px;
  font-size: 17px;
  color: #65676B;
  cursor: pointer;
  transition: background .2s;
}

.create-input:hover {
  background: #E4E6EB;
}

.create-actions {
  display: flex;
  border-top: 1px solid #CED0D4;
  margin-top: 12px;
  padding-top: 8px;
}

.create-act {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  transition: background .2s;
  font-size: 15px;
  font-weight: 600;
  color: #65676B;
}

.create-act:hover {
  background: #E4E6EB;
}

.create-act i {
  font-size: 20px;
}

.ca-video {
  color: #F3425F;
}

.ca-img {
  color: #45BD62;
}

.ca-smile {
  color: #F7B928;
}

.post {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  margin-bottom: 16px;
  overflow: hidden;
}

.post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.post-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.post-info {
  flex: 1;
}

.post-name {
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.post-name:hover {
  text-decoration: underline;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #65676B;
}

.post-meta i {
  font-size: 12px;
}

.post-more {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #65676B;
  transition: background .2s;
}

.post-more:hover {
  background: #E4E6EB;
}

.post-text {
  padding: 0 16px 12px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-line;
}

.post-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  cursor: pointer;
}

.post-img:hover {
  filter: brightness(.97);
}

.post-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 15px;
  color: #65676B;
}

.stats-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rx-icons {
  display: flex;
  margin-right: 4px;
}

.rx-icons span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin-right: -4px;
  border: 2px solid #fff;
}

.rx-like {
  background: #1877F2;
  color: #fff;
  z-index: 3;
}

.rx-love {
  background: #E41E3F;
  color: #fff;
  z-index: 2;
}

.rx-wow {
  background: #F7B928;
  color: #fff;
  z-index: 1;
}

.post-btns {
  display: flex;
  border-top: 1px solid #CED0D4;
  margin: 0 16px;
  padding: 4px 0;
}

.p-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #65676B;
  transition: background .2s;
}

.p-btn:hover {
  background: #F2F2F2;
}

.p-btn i {
  font-size: 18px;
}

.comments-sec {
  border-top: 1px solid #CED0D4;
  margin: 0 16px;
  padding: 8px 0 12px;
}

.cm-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.cm-row img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 2px;
}

.cm-bubble {
  background: #F0F2F5;
  border-radius: 18px;
  padding: 8px 12px;
  max-width: 420px;
}

.cm-bubble .cm-name {
  font-size: 13px;
  font-weight: 600;
}

.cm-bubble .cm-text {
  font-size: 15px;
  line-height: 1.3;
}

.cm-actions {
  display: flex;
  gap: 12px;
  padding-left: 44px;
  margin-bottom: 4px;
}

.cm-actions button {
  font-size: 12px;
  font-weight: 600;
  color: #65676B;
  padding: 2px 4px;
  transition: color .2s;
}

.cm-actions button:hover {
  color: #050505;
}

.cm-input-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}

.cm-input-row img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 2px;
}

.cm-input-wrap {
  flex: 1;
  background: #F0F2F5;
  border-radius: 18px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  outline: none;
}

.cm-input-wrap .cm-icons {
  display: flex;
  gap: 4px;
  color: #65676B;
  font-size: 16px;
}

.cm-input-wrap .cm-icons i {
  cursor: pointer;
  transition: color .2s;
}

.cm-input-wrap .cm-icons i:hover {
  color: #1877F2;
}

.right {
  width: 280px;
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  padding: 16px 16px 16px 8px;
  overflow-y: auto;
  scrollbar-width: none;
}

.right::-webkit-scrollbar {
  display: none;
}

.sp-label {
  font-size: 17px;
  font-weight: 600;
  color: #65676B;
  margin-bottom: 8px;
}

.sp-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
  margin-bottom: 4px;
}

.sp-item:hover {
  background: #E4E6EB;
}

.sp-item img {
  width: 132px;
  height: 132px;
  border-radius: 8px;
  object-fit: cover;
}

.sp-info {
  flex: 1;
}

.sp-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.sp-meta {
  font-size: 13px;
  color: #65676B;
  margin-top: 2px;
}

.r-divider {
  border: none;
  border-top: 1px solid #CED0D4;
  margin: 12px 0;
}

.ct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ct-head h3 {
  font-size: 17px;
  font-weight: 600;
  color: #65676B;
}

.ct-icons {
  display: flex;
  gap: 8px;
}

.ct-icons i {
  font-size: 16px;
  color: #65676B;
  cursor: pointer;
  transition: color .2s;
}

.ct-icons i:hover {
  color: #050505;
}

.ct-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}

.ct-item:hover {
  background: #E4E6EB;
}

.ct-av {
  position: relative;
}

.ct-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #31A24C;
  border: 2px solid #fff;
}

.ct-name {
  font-size: 15px;
  font-weight: 500;
}

@media(max-width:1100px) {
  .right {
    display: none;
  }
}

@media(max-width:900px) {
  .left {
    display: none;
  }
  .center {
    max-width: 100%;
  }
  .nav-center {
    display: none;
  }
  .nav-search input {
    width: 160px;
  }
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #BCC0C4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8A8D91;
}