:root {
        --radius: 16px;
        --radius-sm: 10px;
        --tr: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        --tr-spring: 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
        --font-body: "Plus Jakarta Sans", sans-serif;
        --font-head: "Bricolage Grotesque", sans-serif;
      }
      [data-theme="dark"] {
        --bg: #0a0a0d;
        --surface: #111116;
        --card: #16161c;
        --card-hover: #1c1c24;
        --border: #222230;
        --border2: #2c2c3a;
        --accent: #7c6bff;
        --accent-h: #9585ff;
        --accent-bg: rgba(124, 107, 255, 0.12);
        --accent-glow: rgba(124, 107, 255, 0.25);
        --green: #22d48f;
        --green-bg: rgba(34, 212, 143, 0.1);
        --rose: #ff5f7a;
        --rose-bg: rgba(255, 95, 122, 0.1);
        --amber: #f5a623;
        --amber-bg: rgba(245, 166, 35, 0.1);
        --txt: #eeeef5;
        --txt2: #9090aa;
        --txt3: #55556a;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6);
      }
      [data-theme="light"] {
        --bg: #f2f2f7;
        --surface: #ffffff;
        --card: #ffffff;
        --card-hover: #f8f8fc;
        --border: #e4e4ee;
        --border2: #d8d8e8;
        --accent: #6255e8;
        --accent-h: #7060ff;
        --accent-bg: rgba(98, 85, 232, 0.1);
        --accent-glow: rgba(98, 85, 232, 0.2);
        --green: #10b97a;
        --green-bg: rgba(16, 185, 122, 0.1);
        --rose: #ef4565;
        --rose-bg: rgba(239, 69, 101, 0.1);
        --amber: #e09400;
        --amber-bg: rgba(224, 148, 0, 0.1);
        --txt: #18181f;
        --txt2: #60607a;
        --txt3: #a0a0b8;
        --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: var(--font-body);
        background: var(--bg);
        color: var(--txt);
        min-height: 100vh;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        transition:
          background 0.3s,
          color 0.3s;
          margin: 10px;
      }
      img {
        display: block;
        max-width: 100%;
      }
      /* Lazy-load fade-in */
      img.lazy {
        opacity: 0;
        transition: opacity 0.4s ease;
      }
      img.lazy.loaded {
        opacity: 1;
      }
      button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
        color: inherit;
      }
      /* Focus-visible: keyboard/accessibility focus rings */
      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
      }
      .field input:focus-visible,
      .field textarea:focus-visible {
        outline: none; /* handled by border-color + box-shadow on these */
      }
      input,
      textarea,
      select {
        font-family: inherit;
        color: inherit;
      }
      .shell {
        display: flex;
        min-height: 100vh;
        gap: 0;
        background: var(--surface);
      }
      .sidebar {
        width: 240px;
        flex-shrink: 0;
        background: var(--surface);
        border-right: 1px solid var(--border);
        border-left: none;
        border-top: none;
        border-bottom: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        transition: background 0.3s;
        z-index: 100;
      }
      .logo-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 0 28px;
        width: 100%;
        padding-left: 20px;
        overflow: hidden;
        white-space: nowrap;
      }
      .logo-mark {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: var(--accent);
        border-radius: 12px;
        display: grid;
        place-items: center;
        box-shadow: 0 0 20px var(--accent-glow);
      }
      .logo-mark svg {
        width: 18px;
        height: 18px;
        fill: #fff;
      }
      .logo-text {
        font-family: var(--font-head);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.5px;
        opacity: 1;
        width: auto;
        pointer-events: auto;
        white-space: nowrap;
      }
      .nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        padding: 0 10px;
      }
      .nav-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 12px;
        border-radius: var(--radius-sm);
        color: var(--txt2);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
        transition:
          background var(--tr),
          color var(--tr);
        white-space: nowrap;
        overflow: hidden;
      }
      .nav-item:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .nav-item.active {
        background: var(--accent-bg);
        color: var(--accent);
        font-weight: 700;
        box-shadow: inset 3px 0 0 var(--accent);
      }
      .nav-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }
      .sidebar-create-btn {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 12px;
        margin: 12px 10px 0;
        width: calc(100% - 20px);
        border-radius: var(--radius-sm);
        background: var(--accent);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        font-family: var(--font-body);
        cursor: pointer;
        border: none;
        box-shadow: 0 4px 14px var(--accent-glow);
        transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
        white-space: nowrap;
        overflow: hidden;
      }
      .sidebar-create-btn:hover {
        background: var(--accent-h);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px var(--accent-glow);
      }
      @media (max-width: 767px) {
        .sidebar-create-btn { display: none; }
      }
      .nav-label {
        opacity: 1;
        width: auto;
        pointer-events: auto;
      }
      .sidebar-bottom {
        width: 100%;
        padding: 0 10px;
        border-top: 1px solid var(--border);
        padding-top: 14px;
        margin-top: 14px;
      }
      .user-chip {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--tr);
        overflow: hidden;
        white-space: nowrap;
      }
      .user-chip:hover {
        background: var(--accent-bg);
      }
      .user-info {
        opacity: 1;
        width: auto;
        pointer-events: auto;
        min-width: 0;
      }
      .user-info-name {
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .user-info-sub {
        font-size: 11px;
        color: var(--txt2);
      }
      .av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--accent);
        display: grid;
        place-items: center;
        font-family: var(--font-head);
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        overflow: hidden;
      }
      .av.sm {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }
      .av.lg {
        width: 68px;
        height: 68px;
        font-size: 26px;
        border-radius: 50%;
        box-shadow:
          0 0 0 3px var(--bg),
          0 0 0 5px var(--accent);
      }
      .main {
        flex: 1;
        min-width: 0;
        margin: 0;
        background: var(--bg);
      }
      .content {
        max-width: 620px;
        margin: 0 auto;
        padding: 28px 20px 80px 20px;
        width: 100%;
      }
      .topbar {
        display: none;
        position: sticky;
        top: 0;
        z-index: 90;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 14px 18px;
        align-items: center;
        gap: 12px;
        transition: background 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .topbar.topbar-hidden {
        transform: translateY(-100%);
      }
      .topbar-logo {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1;
      }
      .topbar-logo span {
        font-family: var(--font-head);
        font-size: 18px;
        font-weight: 800;
      }
      .topbar-actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: var(--txt2);
        transition:
          background var(--tr),
          color var(--tr);
      }
      .icon-btn:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .icon-btn svg {
        width: 18px;
        height: 18px;
      }
      .page-header {
        margin-bottom: 24px;
      }
      .page-header h1 {
        font-family: var(--font-head);
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1.2;
      }
      .page-header h1 em {
        font-style: normal;
        color: var(--accent);
      }
      .page-header p {
        font-size: 14px;
        color: var(--txt2);
        margin-top: 4px;
      }
      .view {
        display: none;
        animation: fadeUp 0.28s ease both;
      }
      .view.active {
        display: block;
      }
      #view-login,
      #view-register,
      #view-reset-password,
      #view-new-password {
        min-height: 100svh;
        display: none;
        flex-direction: column;
      }
      #view-login.active,
      #view-register.active,
      #view-reset-password.active,
      #view-new-password.active {
        display: flex;
      }
      #view-post-detail {
        display: none;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
        min-height: 0;
        min-width: 0;
        margin: 0;
      }
      #view-post-detail.active {
        display: flex;
      }
      .post-detail-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        flex-shrink: 0;
        height: 52px;
        transition: background 0.3s;
       
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .field {
        margin-bottom: 16px;
      }
      .field label:not(.av-upload-wrap) {
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--txt2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 7px;
      }
      .field input,
      .field textarea,
      .field select {
        width: 100%;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 11px 14px;
        font-size: 14px;
        transition:
          border-color var(--tr),
          box-shadow var(--tr);
        outline: none;
        resize: none;
        color: var(--txt);
      }
      .field input:focus,
      .field textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-bg);
      }
      .field input::placeholder,
      .field textarea::placeholder {
        color: var(--txt3);
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 22px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 700;
        transition: all var(--tr);
        cursor: pointer;
      }
      .btn-primary {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 4px 16px var(--accent-glow);
      }
      .btn-primary:hover {
        background: var(--accent-h);
        transform: translateY(-1px);
        box-shadow: 0 6px 22px var(--accent-glow);
      }
      .btn-ghost {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .btn-ghost:hover {
        background: var(--accent);
        color: #fff;
      }
      .btn-danger {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .btn-danger:hover {
        background: var(--rose);
        color: #fff;
      }
      .btn-outline {
        border: 1.5px solid var(--border);
        color: var(--txt2);
      }
      .btn-outline:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-bg);
      }
      .btn-full {
        width: 100%;
      }
      .auth-wrap {
        max-width: 420px;
        margin: 0 auto;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px 16px;
        box-sizing: border-box;
      }
      .auth-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 36px 32px;
        box-shadow: var(--shadow-lg);
        transition: background 0.3s;
      }
      .auth-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 28px;
      }
      .auth-brand-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--accent);
        display: grid;
        place-items: center;
        box-shadow: 0 0 20px var(--accent-glow);
      }
      .auth-brand-icon svg {
        width: 20px;
        height: 20px;
        fill: #fff;
      }
      .auth-brand span {
        font-family: var(--font-head);
        font-size: 22px;
        font-weight: 800;
      }
      .auth-slogan {
        font-size: 13px;
        font-style: italic;
        color: var(--accent);
        letter-spacing: 0.2px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease, margin-bottom 0.4s ease;
        pointer-events: none;
      }
      .auth-brand:hover ~ .auth-slogan {
        max-height: 60px;
        opacity: 1;
        margin-bottom: 20px;
        pointer-events: auto;
      }
      .auth-card h2 {
        font-family: var(--font-head);
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 4px;
      }
      .auth-card p.sub {
        color: var(--txt2);
        font-size: 14px;
        margin-bottom: 24px;
      }
      .auth-switch {
        text-align: center;
        margin-top: 18px;
        font-size: 13.5px;
        color: var(--txt2);
      }
      .auth-switch button {
        color: var(--accent);
        font-weight: 700;
        font-size: 13.5px;
        cursor: pointer;
      }
      .auth-switch button:hover {
        text-decoration: underline;
      }
      .auth-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 18px;
        color: var(--txt2);
        font-size: 13px;
      }
      .auth-footer a {
        color: var(--txt);
        text-decoration: none;
      }
      .auth-footer a:hover {
        color: var(--accent);
        text-decoration: underline;
      }
      .legal-footer {
        border-top: 1px solid var(--border);
        background: var(--surface);
        padding: 18px 20px 20px;
      }
      .legal-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        font-size: 13px;
        color: var(--txt2);
      }
      .legal-links a {
        color: var(--txt);
        text-decoration: none;
        transition: color 0.2s ease;
      }
      .legal-links a:hover {
        color: var(--accent);
        text-decoration: underline;
      }
      .legal-page {
        max-width: 860px;
        margin: 0 auto;
        padding: 36px 20px 72px;
      }
      .legal-page h1 {
        font-family: var(--font-head);
        font-size: clamp(28px, 3vw, 38px);
        margin-bottom: 18px;
      }
      .legal-page p,
      .legal-page li {
        color: var(--txt2);
        line-height: 1.85;
        margin: 14px 0;
      }
      .legal-page section {
        margin-bottom: 34px;
      }
      .legal-page h2 {
        font-size: 20px;
        margin-bottom: 12px;
      }
      .legal-page .legal-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 28px;
      }
      .legal-page .legal-nav a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 700;
      }
      .alert {
        padding: 11px 14px;
        border-radius: var(--radius-sm);
        font-size: 13.5px;
        margin-bottom: 16px;
        display: none;
        font-weight: 500;
      }
      .alert.error {
        background: var(--rose-bg);
        border: 1px solid var(--rose);
        color: var(--rose);
        display: block;
      }
      .alert.success {
        background: var(--green-bg);
        border: 1px solid var(--green);
        color: var(--green);
        display: block;
      }
      .compose {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px;
        margin-bottom: 18px;
        transition:
          border-color var(--tr),
          background 0.3s;
      }
      .compose:focus-within {
        border-color: var(--accent);
      }
      .compose-row {
        display: flex;
        gap: 13px;
        align-items: flex-start;
      }
      .compose-field {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--txt);
        font-size: 15px;
        resize: none;
        min-height: 56px;
        line-height: 1.6;
        font-family: var(--font-body);
      }
      .compose-field::placeholder {
        color: var(--txt3);
      }
      .compose-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
      }
      .compose-action {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border-radius: 8px;
        color: var(--txt2);
        font-size: 13px;
        font-weight: 600;
        transition:
          background var(--tr),
          color var(--tr);
        cursor: pointer;
      }
      .compose-action:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .compose-action svg {
        width: 16px;
        height: 16px;
      }
      .post-btn {
        margin-left: auto;
        background: var(--accent);
        color: #fff;
        padding: 8px 22px;
        border-radius: 20px;
        font-size: 13.5px;
        font-weight: 700;
        box-shadow: 0 2px 12px var(--accent-glow);
        transition: all var(--tr);
        border: none;
        cursor: pointer;
      }
      .post-btn:hover {
        background: var(--accent-h);
        transform: translateY(-1px);
      }
      .post-btn:disabled {
        opacity: 0.5;
        transform: none;
        cursor: not-allowed;
      }
      .img-preview-wrap {
        position: relative;
        margin-top: 12px;
        display: none;
      }
      .img-preview-wrap img {
        width: 100%;
        max-height: 240px;
        object-fit: cover;
        border-radius: 10px;
      }
      .img-preview-wrap video {
        width: 100%;
        max-height: 240px;
        border-radius: 10px;
        display: block;
        background: #000;
      }
      /* Video compression progress overlay (modal compose) */
      .video-compress-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.55);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        z-index: 2;
        pointer-events: none;
      }
      .video-compress-overlay.hidden { display: none; }
      .video-compress-label {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.2px;
      }
      .video-compress-track {
        width: 70%;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 4px;
        overflow: hidden;
      }
      .video-compress-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent), var(--accent-h));
        border-radius: 4px;
        transition: width 0.3s ease;
        box-shadow: 0 0 6px var(--accent-glow);
      }
      .img-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border-radius: 50%;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        font-size: 13px;
        backdrop-filter: blur(6px);
        transition: background var(--tr);
        cursor: pointer;
        border: none;
      }
      .img-remove:hover {
        background: var(--rose);
      }
      input[type="file"].hidden {
        display: none;
      }
      .login-nudge {
        background: linear-gradient(135deg, var(--accent-bg) 0%, var(--card) 100%);
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        padding: 22px 20px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        color: var(--txt);
        transition: background 0.3s;
      }
      .login-nudge-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: var(--accent);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        color: #fff;
      }
      .login-nudge-icon svg {
        width: 22px;
        height: 22px;
      }
      .login-nudge-body { flex: 1; }
      .login-nudge-title { font-weight: 700; font-size: 15px; color: var(--txt); margin-bottom: 4px; }
      .login-nudge-sub { font-size: 13px; color: var(--txt2); margin-bottom: 12px; }
      .login-nudge-actions { display: flex; gap: 8px; flex-wrap: wrap; }
      .login-nudge-btn-primary {
        background: var(--accent); color: #fff; border: none; border-radius: 20px;
        padding: 7px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
        font-family: inherit; transition: opacity 0.2s;
      }
      .login-nudge-btn-primary:hover { opacity: 0.85; }
      .login-nudge-btn-secondary {
        background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
        border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 700;
        cursor: pointer; font-family: inherit; transition: background 0.2s;
      }
      .login-nudge-btn-secondary:hover { background: var(--accent-bg); }
      .link {
        color: var(--accent);
        font-weight: 700;
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
        font-size: inherit;
      }
      .feed {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .post-card + .post-card {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 2px;
      }
      .post-card:not(:last-child) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      .post-card:first-child {
        border-radius: var(--radius) var(--radius) 0 0;
      }
      .post-card:last-child {
        border-radius: 0 0 var(--radius) var(--radius);
      }
      .post-card:only-child {
        border-radius: var(--radius);
      }
      /* ── Feed + Aside two-column layout ─────────────────────────── */
      .feed-layout {
        display: flex;
        gap: 0;
        align-items: flex-start;
        margin: 0;
        min-height: 100%;
      }
      @keyframes livePostIn {
        from { opacity: 0; transform: translateY(-12px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0)     scale(1); }
      }
      .feed-main {
        flex: 1;
        min-width: 0;
        margin: 0;
      }
      .feed-aside {
        width: 272px;
        flex-shrink: 0;
        display: none;
        position: sticky;
        top: 0;
        border-left: 1px solid var(--border);
        padding: 28px 16px 80px 16px;
        margin: 0;
        min-height: 100vh;
        background: var(--surface);
      }
      @media (min-width: 1100px) {
        .feed-aside { display: block; }
        /* widen content area for feed and messages views */
        .content.feed-active,
        .content.messages-active { max-width: 940px; }
      }

      /* ── Trending on Circle card ──────────────────────────── */
      .trending-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px;
        transition: background 0.3s, border-color 0.3s;
        animation: fadeUp 0.35s ease both;
      }
      .trending-title {
        font-family: var(--font-head);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.3px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .trending-title span {
        font-size: 17px;
      }
      .trending-refresh {
        margin-left: auto;
        color: var(--txt3);
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        padding: 3px 7px;
        border-radius: 6px;
        transition: background var(--tr), color var(--tr);
        font-family: var(--font-body);
      }
      .trending-refresh:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .trending-filter-active {
        background: var(--accent-bg);
        border-radius: 8px;
        padding: 7px 10px;
        margin-bottom: 12px;
        font-size: 12px;
        color: var(--accent);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .trending-filter-clear {
        margin-left: auto;
        cursor: pointer;
        opacity: 0.7;
        font-size: 13px;
        line-height: 1;
        transition: opacity var(--tr);
      }
      .trending-filter-clear:hover { opacity: 1; }
      .trending-pills {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .trending-pill {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 11px;
        border-radius: 10px;
        cursor: pointer;
        transition: background var(--tr);
        border: none;
        background: none;
        font-family: inherit;
        width: 100%;
        text-align: left;
      }
      .trending-pill:hover {
        background: var(--accent-bg);
      }
      .trending-pill.active {
        background: var(--accent-bg);
      }
      .trending-pill-rank {
        font-size: 11px;
        font-weight: 800;
        color: var(--txt3);
        width: 14px;
        flex-shrink: 0;
        text-align: center;
      }
      .trending-pill-word {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--txt);
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .trending-pill-badge {
        font-size: 11px;
        font-weight: 700;
        color: var(--accent);
        background: var(--accent-bg);
        border-radius: 20px;
        padding: 2px 8px;
        flex-shrink: 0;
      }
      .trending-pill-signal {
        font-size: 10px;
        font-weight: 700;
        flex-shrink: 0;
      }
      .trending-pill-signal.rising { color: var(--green); }
      .trending-pill-signal.stable { color: var(--txt3); }
      .trending-empty {
        text-align: center;
        color: var(--txt3);
        font-size: 13px;
        padding: 18px 0 6px;
        line-height: 1.5;
      }
      .trending-guest {
        text-align: center;
        color: var(--txt2);
        font-size: 13px;
        padding: 8px 0 4px;
        line-height: 1.6;
      }
      .trending-guest a {
        color: var(--accent);
        cursor: pointer;
        font-weight: 700;
        text-decoration: none;
      }
      .trending-guest a:hover { text-decoration: underline; }
      .trending-skeleton {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .trending-skel-row {
        height: 36px;
        border-radius: 10px;
        background: var(--border);
        opacity: 0.5;
        animation: shimmer 1.4s infinite;
      }
      @keyframes shimmer {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 0.6; }
      }
      /* ── Hashtags & Topic Pills ─────────────────────────────────── */
      .hashtag {
        color: var(--accent);
        font-weight: 600;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 2px;
        transition: background var(--tr), color var(--tr);
      }
      .hashtag:hover {
        background: var(--accent-bg);
        text-decoration: underline;
      }
      .mention {
        color: var(--accent);
        font-weight: 600;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 2px;
        transition: background var(--tr), color var(--tr);
      }
      .mention:hover {
        background: var(--accent-bg);
        text-decoration: underline;
      }
      .post-link {
        color: var(--accent);
        text-decoration: none;
        word-break: break-all;
        border-radius: 4px;
        padding: 0 2px;
        transition: background var(--tr);
        position: relative;
        z-index: 1;
        pointer-events: auto;
      }
      .post-link:hover {
        background: var(--accent-bg);
        text-decoration: underline;
      }
      .topic-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 4px 0;
      }
      .topic-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--accent-bg);
        color: var(--accent);
        border: 1px solid var(--accent-glow);
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--tr), transform var(--tr-spring);
        user-select: none;
      }
      .topic-pill:hover {
        background: var(--accent);
        color: #fff;
        transform: translateY(-1px);
      }
      .topic-pill-count {
        background: rgba(255,255,255,0.2);
        border-radius: 10px;
        padding: 1px 7px;
        font-size: 11px;
        font-weight: 700;
      }
      .topic-pill:not(:hover) .topic-pill-count {
        background: var(--border2);
        color: var(--txt2);
      }
      .feed-personalised-hint {
        font-size: 12px;
        color: var(--txt2);
        padding: 2px 0 10px;
        display: none;
      }
      /* ── Explore topics ranked list ─────────────────────────────── */
      .topic-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .topic-list-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--tr);
      }
      .topic-list-row:hover { background: var(--card-hover); }
      .topic-list-rank {
        font-size: 12px;
        font-weight: 700;
        color: var(--txt3);
        min-width: 18px;
        text-align: right;
      }
      .topic-list-name {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: var(--accent);
      }
      .topic-list-count {
        font-size: 12px;
        color: var(--txt2);
        white-space: nowrap;
      }
      .topic-show-more {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--accent-bg);
        border: 1px solid var(--border2);
        border-radius: var(--radius-sm);
        color: var(--accent);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        padding: 9px 14px;
        margin-top: 6px;
        width: 100%;
        transition: background var(--tr), border-color var(--tr);
      }
      .topic-show-more:hover { background: var(--accent-bg); border-color: var(--accent); text-decoration: none; }
      .topic-show-more svg {
        width: 14px; height: 14px; flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
      }
      .topic-show-more.open svg { transform: rotate(180deg); }

      /* Animated drawer for extra topics */
      .topic-extra-drawer {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
        opacity: 0;
      }
      .topic-extra-drawer.open {
        max-height: 2000px;
        opacity: 1;
      }

      .trending-footer {
        margin-top: 12px;
        font-size: 11px;
        color: var(--txt3);
        text-align: center;
      }

      .post-card {
        background: var(--card);
        border: 1.5px solid var(--border2);
        border-radius: var(--radius);
        overflow: visible;
        transition: background 0.3s;
        animation: fadeUp 0.28s ease both;
      }
      .activity-body {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px 6px;
        font-size: 14px;
        color: var(--txt2);
      }
      .activity-photo-wrap {
        padding: 4px 16px 14px;
      }
      .echo-strip {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 10px 16px 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--txt2);
      }
      .echo-strip svg {
        width: 13px;
        height: 13px;
      }
      .post-head {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px 16px 0;
      }
      .post-meta {
        flex: 1;
        min-width: 0;
      }
      .post-name {
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }
      .post-name:hover {
        color: var(--accent);
        text-decoration: underline;
      }
      .post-time {
        font-size: 12px;
        color: var(--txt2);
        margin-top: 1px;
      }
      .post-del {
        color: var(--txt3);
        padding: 5px 7px;
        border-radius: 8px;
        transition:
          background var(--tr),
          color var(--tr);
        cursor: pointer;
        border: none;
        background: none;
      }
      .post-del:hover {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .post-del svg {
        width: 14px;
        height: 14px;
      }
      /* ── Post three-dot menu ─────────────────────────────────── */
      .post-menu-wrap {
        position: relative;
      }
      .post-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        color: var(--txt3);
        background: none;
        border: none;
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.5px;
        line-height: 1;
      }
      .post-menu-btn:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .post-dropdown {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        z-index: 2000;
        background: var(--card);
        border: 1px solid var(--border2);
        border-radius: 16px;
        padding: 6px;
        min-width: 200px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.28), 0 2px 12px rgba(0,0,0,0.14);
        animation: dropIn 0.18s cubic-bezier(0.34,1.4,0.64,1) forwards;
      }
      .post-dropdown.open {
        display: block;
      }
      /* dim backdrop behind centered dropdown */
      .post-dropdown.open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: -1;
        backdrop-filter: blur(2px);
        animation: fadeIn 0.15s ease;
      }
      @keyframes dropIn {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.90); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      }
      .post-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--txt2);
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        width: 100%;
        border: none;
        background: none;
        font-family: inherit;
        text-align: left;
      }
      .post-dropdown-item:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .post-dropdown-item.danger:hover {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .post-dropdown-item svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
      }
      .post-dropdown-divider {
        height: 1px;
        background: var(--border);
        margin: 4px 6px;
      }
      .post-body {
        padding: 10px 16px;
        font-size: 15px;
        line-height: 1.65;
        color: var(--txt);
      }
      .post-body.truncated {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .post-see-more {
        padding: 2px 16px 8px;
        font-size: 14px;
        font-weight: 700;
        color: var(--accent);
        cursor: pointer;
        display: inline-block;
      }
      .post-see-more:hover {
        text-decoration: underline;
      }
      .post-img {
        width: 100%;
        max-height: 600px;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        margin-top: 20px;
      }
      .post-video {
        width: 100%;
        max-height: 480px;
        border-radius: 10px;
        display: block;
        background: #000;
        margin-top: 20px;
      }
      .post-video-wrap {
        position: relative;
        margin-top: 20px;
        cursor: pointer;
      }
      .post-video-wrap video {
        width: 100%;
        max-height: 480px;
        border-radius: 10px;
        display: block;
        background: #000;
        margin-top: 0;
        pointer-events: none;
      }
      .post-video-play-btn {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(0,0,0,0.28);
        transition: background var(--tr);
      }
      .post-video-wrap:hover .post-video-play-btn {
        background: rgba(0,0,0,0.45);
      }
      .post-video-play-btn svg {
        width: 52px;
        height: 52px;
        filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
        transition: transform var(--tr-spring);
      }
      .post-video-wrap:hover .post-video-play-btn svg {
        transform: scale(1.1);
      }
      .echo-embed {
        margin: 0 16px 12px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 12px 14px;
        transition: background 0.15s ease, border-color 0.15s ease;
      }
      .echo-embed:hover {
        background: var(--card-hover);
        border-color: var(--accent);
      }
      .echo-embed-name {
        font-size: 12px;
        font-weight: 700;
        color: var(--txt2);
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .echo-embed-name::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
      }
      .echo-embed-text {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--txt);
      }
      .echo-embed-img {
        width: 100%;
        max-height: 600px;
        object-fit: cover;
        border-radius: 7px;
        margin-top: 8px;
      }
      /* Fix repost embed video sizing */
      .echo-embed-video {
        margin-top: 8px !important;
        position: relative;
        width: 100%;
      }
      .echo-embed-video video {
        width: 100% !important;
        min-height: 160px;
        max-height: 260px !important;
        border-radius: 7px;
        display: block !important;
        background: #000;
        object-fit: cover;
      }
      /* ── Notification skeleton loader ───────────────────────────── */
      .notif-skel-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 20px;
        animation: skelPulse 1.5s ease-in-out infinite;
      }
      .notif-skel-av {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--border2);
        flex-shrink: 0;
      }
      .notif-skel-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .notif-skel-line {
        height: 10px;
        border-radius: 6px;
        background: var(--border2);
      }
      .notif-skel-line.w-70 { width: 70%; }
      .notif-skel-line.w-45 { width: 45%; }
      .notif-skel-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--border2);
        flex-shrink: 0;
      }
      /* End cap */
      .notif-end {
        padding: 20px;
        text-align: center;
      }
      .notif-end-text {
        font-size: 12px;
        font-weight: 600;
        color: var(--txt3);
      }
      .skel-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        overflow: hidden;
      }
      .skel-row {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-bottom: 14px;
      }
      .skel-av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--border2);
        animation: skelPulse 1.5s ease-in-out infinite;
      }
      .skel-meta {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .skel-line {
        height: 10px;
        border-radius: 6px;
        background: var(--border2);
        animation: skelPulse 1.5s ease-in-out infinite;
      }
      .skel-line.w-60  { width: 60%; }
      .skel-line.w-40  { width: 40%; }
      .skel-line.w-90  { width: 90%; }
      .skel-line.w-75  { width: 75%; }
      .skel-line.w-50  { width: 50%; }
      .skel-line.h-14  { height: 14px; }
      .skel-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
      }
      .skel-media {
        width: 100%;
        height: 180px;
        border-radius: 10px;
        background: var(--border2);
        margin-bottom: 14px;
        animation: skelPulse 1.5s ease-in-out infinite;
      }
      .skel-actions {
        display: flex;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }
      .skel-btn {
        height: 28px;
        width: 64px;
        border-radius: 8px;
        background: var(--border2);
        animation: skelPulse 1.5s ease-in-out infinite;
      }
      /* stagger animation delays for a wave effect */
      .skel-card:nth-child(1) .skel-av,
      .skel-card:nth-child(1) .skel-line,
      .skel-card:nth-child(1) .skel-media,
      .skel-card:nth-child(1) .skel-btn { animation-delay: 0s; }
      .skel-card:nth-child(2) .skel-av,
      .skel-card:nth-child(2) .skel-line,
      .skel-card:nth-child(2) .skel-media,
      .skel-card:nth-child(2) .skel-btn { animation-delay: 0.15s; }
      .skel-card:nth-child(3) .skel-av,
      .skel-card:nth-child(3) .skel-line,
      .skel-card:nth-child(3) .skel-media,
      .skel-card:nth-child(3) .skel-btn { animation-delay: 0.3s; }
      @keyframes skelPulse {
        0%, 100% { opacity: 0.45; }
        50%       { opacity: 0.85; }
      }
      .post-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 10px 12px;
        border-top: 1px solid var(--border);
      }
      .act-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        min-height: 44px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--txt2);
        transition:
          background var(--tr),
          color var(--tr);
        cursor: pointer;
        border: none;
        background: none;
      }
      .act-btn:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .act-btn.liked {
        color: var(--rose);
      }
      .act-btn.liked svg {
        fill: var(--rose);
      }
      .act-btn.reposted {
        color: var(--green);
      }
      .act-btn.report:hover {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .act-btn svg {
        width: 15px;
        height: 15px;
        transition: fill var(--tr);
      }
      .act-views {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-left: auto;
        padding: 6px 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--txt3);
        pointer-events: none;
        user-select: none;
      }
      .act-views svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
      }
      .comments-panel {
        border-top: 1px solid var(--border);
        padding: 14px 16px;
        display: none;
        flex-direction: column;
        gap: 11px;
      }
      .comments-panel.open {
        display: flex;
      }
      .comment-row {
        display: flex;
        gap: 10px;
      }
      .comment-bubble {
        flex: 1;
        background: var(--bg);
        border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
        padding: 9px 13px;
      }
      .comment-name {
        font-size: 12.5px;
        font-weight: 700;
        margin-bottom: 3px;
      }
      .comment-txt {
        font-size: 13.5px;
        color: var(--txt2);
        line-height: 1.5;
      }
      .comment-input-row {
        display: flex;
        gap: 9px;
        align-items: center;
        margin-top: 4px;
      }
      .comment-input {
        flex: 1;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 13.5px;
        color: var(--txt);
        outline: none;
        transition: border-color var(--tr);
      }
      .comment-input:focus {
        border-color: var(--accent);
      }
      .comment-input::placeholder {
        color: var(--txt3);
      }
      .send-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 2px 10px var(--accent-glow);
        transition: all var(--tr);
        border: none;
        cursor: pointer;
      }
      .send-btn:hover {
        background: var(--accent-h);
        transform: scale(1.08);
      }
      .send-btn svg {
        width: 14px;
        height: 14px;
      }
      .empty {
        text-align: center;
        padding: 64px 20px;
        color: var(--txt2);
      }
      .empty-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        background: var(--accent-bg);
        margin: 0 auto 16px;
        display: grid;
        place-items: center;
        color: var(--accent);
      }
      .empty-icon svg {
        width: 28px;
        height: 28px;
      }
      .empty h3 {
        font-family: var(--font-head);
        font-size: 17px;
        font-weight: 700;
        color: var(--txt);
        margin-bottom: 6px;
      }
      .empty p {
        font-size: 14px;
      }
      /* ── Profile: banner + meta (mirrors group-detail layout) ── */
      .profile-banner {
        height: 140px;
        border-radius: var(--radius);
        margin-bottom: 0;
        position: relative;
        overflow: visible;
        flex-shrink: 0;
      }
      .profile-banner-gradient {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        border-radius: var(--radius);
        overflow: hidden;
      }
      .profile-cover-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        border-radius: var(--radius);
      }
      .profile-cover-edit-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 11px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        font-family: var(--font-body);
        cursor: pointer;
        transition: background 0.15s, transform 0.15s;
      }
      .profile-cover-edit-btn:hover {
        background: rgba(0, 0, 0, 0.65);
        transform: scale(1.04);
      }
      /* Avatar anchored to bottom-left of banner */
      .profile-av-anchor {
        position: absolute;
        bottom: -28px;
        left: 20px;
        z-index: 2;
      }
      .av.profile-lg {
        width: 72px;
        height: 72px;
        font-size: 28px;
        border-radius: 50%;
        box-shadow:
          0 0 0 3px var(--bg),
          0 0 0 5px rgba(255,255,255,0.12);
        flex-shrink: 0;
      }
      .profile-meta {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-top: 40px;
        margin-bottom: 14px;
      }
      .profile-info {
        flex: 1;
        min-width: 0;
      }
      .profile-name {
        font-family: var(--font-head);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.4px;
        margin-bottom: 2px;
      }
      .profile-handle {
        font-size: 13px;
        color: var(--txt2);
        margin-bottom: 4px;
      }
      .profile-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        align-items: center;
        flex-wrap: wrap;
      }
      /* Stats as icon+number pills (mirrors .group-detail-stats) */
      .profile-stats {
        display: flex;
        gap: 14px;
        font-size: 12.5px;
        color: var(--txt2);
        font-weight: 600;
        margin-bottom: 16px;
        flex-wrap: wrap;
      }
      .profile-stats span {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .profile-stats svg {
        width: 13px;
        height: 13px;
      }
      .profile-stats strong {
        color: var(--txt);
        font-weight: 700;
      }
      .logout-btn-sm {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        background: var(--rose-bg);
        color: var(--rose);
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all var(--tr);
        cursor: pointer;
        border: none;
      }
      .logout-btn-sm:hover {
        background: var(--rose);
        color: #fff;
      }
      .logout-btn-sm svg {
        width: 14px;
        height: 14px;
      }
      .settings-section {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        margin-bottom: 16px;
        transition: background 0.3s;
      }
      .settings-section-title {
        padding: 16px 20px 12px;
        font-size: 11px;
        font-weight: 800;
        color: var(--txt2);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-bottom: 1px solid var(--border);
      }
      .settings-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 20px;
        border-bottom: 1px solid var(--border);
        transition: background var(--tr);
        cursor: default;
      }
      .settings-row:last-child {
        border-bottom: none;
      }
      .settings-row:hover {
        background: var(--card-hover);
      }
      .settings-row-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      .settings-row-icon svg {
        width: 18px;
        height: 18px;
      }
      .settings-row-icon.purple {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .settings-row-icon.green {
        background: var(--green-bg);
        color: var(--green);
      }
      .settings-row-icon.amber {
        background: var(--amber-bg);
        color: var(--amber);
      }
      .settings-row-icon.rose {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .settings-row-body {
        flex: 1;
        min-width: 0;
      }
      .settings-row-title {
        font-size: 14px;
        font-weight: 700;
      }
      .settings-row-sub {
        font-size: 12px;
        color: var(--txt2);
        margin-top: 2px;
      }
      .settings-row-end {
        flex-shrink: 0;
      }
      .toggle {
        position: relative;
        width: 46px;
        height: 26px;
        cursor: pointer;
        display: inline-block;
      }
      .toggle input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
      }
      .toggle-track {
        position: absolute;
        inset: 0;
        background: var(--border2);
        border-radius: 13px;
        transition: background var(--tr);
      }
      .toggle input:checked + .toggle-track {
        background: var(--accent);
      }
      .toggle-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: transform var(--tr-spring);
      }
      .toggle input:checked ~ .toggle-thumb {
        transform: translateX(20px);
      }
      .settings-edit-form {
        padding: 20px;
      }
      .settings-save-row {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
      }
      .danger-zone {
        background: var(--rose-bg);
        border: 1px solid var(--rose);
        border-radius: var(--radius);
        padding: 20px;
        margin-bottom: 16px;
      }
      .danger-zone h3 {
        font-family: var(--font-head);
        font-size: 15px;
        font-weight: 800;
        color: var(--rose);
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .danger-zone p {
        font-size: 13px;
        color: var(--txt2);
        margin-bottom: 14px;
      }
      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        z-index: 3000;
        display: none;
        place-items: center;
        animation: fadeIn 0.18s ease;
      }
      .modal-backdrop.open {
        display: grid;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .modal {
        background: var(--card);
        border: 1px solid var(--border2);
        border-radius: var(--radius);
        padding: 26px;
        width: min(500px, 94vw);
        box-shadow: var(--shadow-lg);
        animation: slideUp 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
      }
      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(24px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .modal-title {
        font-family: var(--font-head);
        font-size: 17px;
        font-weight: 800;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .modal-title svg {
        width: 18px;
        height: 18px;
        color: var(--green);
      }
      /* ── Post Detail View ─────────────────────────────────── */
      .post-detail-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px 16px 12px;
        margin-bottom: 2px;
        overflow: visible;
        max-width: 100%;
        box-sizing: border-box;
      }
      .post-detail-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
      }
      .post-detail-author {
        display: flex;
        flex-direction: column;
      }
      .post-detail-name {
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        color: var(--txt);
      }
      .post-detail-name:hover {
        color: var(--accent);
      }
      .post-detail-time {
        font-size: 13px;
        color: var(--txt3);
        margin-top: 2px;
      }
      .post-detail-body {
        font-size: 17px;
        line-height: 1.6;
        color: var(--txt);
        margin-bottom: 14px;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
      }
      .post-detail-img {
        width: 100%;
        border-radius: var(--radius-sm);
        margin-bottom: 14px;
        object-fit: cover;
        max-height: 500px;
        cursor: pointer;
      }
      .post-detail-stats {
        display: flex;
        gap: 20px;
        padding: 12px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        margin-bottom: 4px;
      }
      .post-detail-stat {
        font-size: 14px;
        color: var(--txt2);
      }
      .post-detail-stat strong {
        color: var(--txt);
        font-weight: 700;
      }
      .post-detail-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 0 2px;
        border-bottom: 1px solid var(--border);
      }
      .post-detail-actions .act-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        border-radius: var(--radius-sm);
        font-size: 13.5px;
      }
      .post-detail-actions .post-menu-wrap {
        flex: 1;
        display: flex;
      }
      .post-detail-actions .post-menu-wrap .act-btn {
        width: 100%;
      }
      .post-detail-comments-section {
        background: var(--card);
        border-radius: var(--radius);
        padding: 0 16px;
        margin-top: 8px;
      }
      .post-detail-comments-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--txt3);
        padding: 14px 0 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .post-detail-comment-row {
        display: flex;
        gap: 10px;
        padding: 12px 0;
        border-top: 1px solid var(--border);
      }
      .post-detail-comment-bubble {
        flex: 1;
      }
      .post-detail-comment-name {
        font-weight: 700;
        font-size: 13.5px;
        color: var(--txt);
        margin-bottom: 3px;
      }
      .post-detail-comment-name:hover {
        color: var(--accent);
        text-decoration: underline;
      }
      .post-detail-comment-text {
        font-size: 14px;
        color: var(--txt2);
        line-height: 1.5;
        word-break: break-word;
      }
      .post-detail-comment-time {
        font-size: 11.5px;
        color: var(--txt3);
        margin-top: 4px;
      }
      .post-detail-no-comments {
        text-align: center;
        padding: 32px 16px;
        color: var(--txt3);
        font-size: 14px;
      }
      /* ── Comment skeleton loaders ───────────────────────────── */
      .comment-skel-item {
        display: flex;
        gap: 10px;
        padding: 12px 0;
        border-top: 1px solid var(--border);
      }
      .comment-skel-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--border);
        flex-shrink: 0;
        animation: skel-pulse 1.4s ease-in-out infinite;
      }
      .comment-skel-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 7px;
        justify-content: center;
      }
      .comment-skel-name {
        height: 11px;
        width: 30%;
        border-radius: 6px;
        background: var(--border);
        animation: skel-pulse 1.4s ease-in-out infinite;
      }
      .comment-skel-line {
        height: 11px;
        border-radius: 6px;
        background: var(--border);
        animation: skel-pulse 1.4s ease-in-out infinite;
      }
      .comment-skel-line.long  { width: 85%; animation-delay: 0.1s; }
      .comment-skel-line.short { width: 55%; animation-delay: 0.2s; }
      @keyframes skel-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.4; }
      }

      /* ── Reply feature styles ─────────────────────────────── */
      /* Feed card comment reply nesting */
      .comment-replies {
        margin-left: 36px;
        border-left: 2px solid var(--border2);
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 4px;
        margin-bottom: 2px;
      }
      .comment-reply .av.sm {
        width: 24px;
        height: 24px;
        font-size: 10px;
      }
      .comment-reply .comment-bubble {
        background: var(--card-hover);
      }
      .av.xs {
        width: 24px;
        height: 24px;
        font-size: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .post-detail-comment-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .post-detail-comment-item {
        display: flex;
        gap: 10px;
        padding: 12px 0;
        border-top: 1px solid var(--border);
      }
      .comment-reply-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--txt3);
        background: none;
        border: none;
        cursor: pointer;
        padding: 2px 0;
        font-family: inherit;
        transition: color var(--tr);
      }
      .comment-reply-btn:hover {
        color: var(--accent);
      }
      .comment-reply-btn svg {
        width: 12px;
        height: 12px;
      }
      .nested-replies {
        margin-top: 6px;
        border-left: 2px solid var(--border2);
        padding-left: 12px;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .nested-reply-item {
        display: flex;
        gap: 8px;
        padding: 10px 0;
        border-top: 1px solid var(--border);
      }
      .nested-reply-item:first-child {
        border-top: none;
        padding-top: 6px;
      }
      .reply-to-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--accent-bg);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        font-size: 12.5px;
        color: var(--accent);
        font-weight: 600;
        border: 1px solid var(--border);
        border-bottom: none;
        margin-bottom: -2px;
      }
      .reply-to-banner svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
      }
      .reply-cancel-btn {
        margin-left: auto;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--accent);
        font-size: 16px;
        line-height: 1;
        padding: 0 2px;
        opacity: 0.7;
        transition: opacity var(--tr);
      }
      .reply-cancel-btn:hover { opacity: 1; }
      .view-replies-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
        color: var(--accent);
        background: none;
        border: none;
        cursor: pointer;
        padding: 3px 0;
        font-family: inherit;
        transition: opacity var(--tr);
        opacity: 0.8;
      }
      .view-replies-btn:hover { opacity: 1; }
      .view-replies-btn svg { width: 13px; height: 13px; }

      .post-detail-reply-bar {
        position: sticky;
        bottom: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 10px 0 max(10px, env(safe-area-inset-bottom));
        z-index: 50;
        transition: background 0.3s;
        display: none;
        flex-shrink: 0;
      }
      .post-detail-reply-bar .comment-input-row {
        max-width: 620px;
        margin: 0 auto;
        padding: 0 20px;
      }
      .post-detail-reply-bar.visible {
        display: block;
      }
      .back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--txt2);
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        transition: background var(--tr), color var(--tr);
      }
      .back-btn:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .echo-preview-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--txt2);
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .echo-preview-name::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
      }
      .echo-preview-text {
        font-size: 14px;
        line-height: 1.55;
      }
      .echo-preview-img {
        width: 100%;
        max-height: 130px;
        object-fit: cover;
        border-radius: 7px;
        margin-top: 8px;
      }
      /* ── Repost popover (Twitter-style) ─────────────────── */
      /* repost dropdown — reuses .post-menu-wrap / .post-dropdown pattern */
      .rp-undo { color: var(--green) !important; }
      .modal textarea {
        width: 100%;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 11px 14px;
        color: var(--txt);
        font-size: 14px;
        resize: none;
        outline: none;
        min-height: 78px;
        line-height: 1.55;
        margin-bottom: 16px;
        font-family: var(--font-body);
        transition: border-color var(--tr);
      }
      .modal textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-bg);
      }
      .modal textarea::placeholder {
        color: var(--txt3);
      }
      .modal-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
      }
      .modal-cancel {
        padding: 9px 18px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        color: var(--txt2);
        transition: all var(--tr);
        cursor: pointer;
      }
      .modal-cancel:hover {
        background: var(--card-hover);
        color: var(--txt);
      }
      .modal-confirm {
        padding: 9px 22px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        background: var(--green);
        color: #fff;
        box-shadow: 0 3px 14px rgba(34, 212, 143, 0.3);
        transition: all var(--tr);
        cursor: pointer;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .modal-confirm:hover {
        background: #2ae89c;
        transform: translateY(-1px);
      }
      .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      /* ── SUGGESTED USERS WIDGET ──────────────────────────────── */
      .suggestions-widget {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px;
        margin-bottom: 20px;
        transition: background 0.3s;
      }
      .feed-sug-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px 16px 14px;
        margin-bottom: 12px;
        transition: background 0.3s;
      }
      .feed-sug-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
      }
      .feed-sug-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--txt2);
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .feed-sug-dismiss {
        font-size: 12px;
        color: var(--txt3);
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 20px;
        transition: background var(--tr), color var(--tr);
      }
      .feed-sug-dismiss:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .feed-sug-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }
      .feed-sug-scroll::-webkit-scrollbar { display: none; }
      .feed-sug-pill {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        min-width: 80px;
        padding: 12px 8px;
        border-radius: var(--radius-sm);
        background: var(--surface);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: background var(--tr), border-color var(--tr);
        flex-shrink: 0;
      }
      .feed-sug-pill:hover { background: var(--card-hover); border-color: var(--border2); }
      .feed-sug-pill .sug-av {
        width: 44px; height: 44px;
        font-size: 16px;
        cursor: pointer;
      }
      .feed-sug-pill-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--txt);
        text-align: center;
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .feed-sug-pill-btn {
        font-size: 11px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 20px;
        border: 1.5px solid var(--accent);
        color: var(--accent);
        background: transparent;
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        white-space: nowrap;
      }
      .feed-sug-pill-btn:hover, .feed-sug-pill-btn.following {
        background: var(--accent);
        color: #fff;
      }
      .feed-sug-reason {
        font-size: 10px;
        color: var(--txt3);
        text-align: center;
        max-width: 76px;
        line-height: 1.3;
        margin-top: -3px;
      }
      .feed-sug-reason strong {
        color: var(--accent);
        font-weight: 700;
      }
      .suggestions-section {
        margin-bottom: 20px;
      }
      .sug-score {
        font-size: 11px;
        color: var(--txt3);
      }
      .suggestions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
      }
      .suggestions-title {
        font-family: var(--font-head);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.3px;
      }
      .suggestions-refresh {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: var(--txt3);
        transition: all var(--tr);
        cursor: pointer;
        background: none;
        border: none;
      }
      .suggestions-refresh:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .suggestions-refresh svg {
        width: 14px;
        height: 14px;
      }
      .suggestions-refresh.spinning svg {
        animation: sug-spin 0.6s linear infinite;
      }
      @keyframes sug-spin {
        to {
          transform: rotate(360deg);
        }
      }
      .suggestions-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
      }
      .suggestions-scroll::-webkit-scrollbar {
        display: none;
      }
      .sug-card {
        flex-shrink: 0;
        width: 120px;
        background: var(--card-hover);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        transition:
          border-color var(--tr),
          transform var(--tr);
      }
      .sug-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
      }
      .sug-av {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--accent);
        display: grid;
        place-items: center;
        font-family: var(--font-head);
        font-size: 17px;
        font-weight: 800;
        color: #fff;
        flex-shrink: 0;
        cursor: pointer;
        overflow: hidden;
        transition: opacity var(--tr);
      }
      .sug-av:hover {
        opacity: 0.85;
      }
      .sug-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
      .sug-name {
        font-size: 12.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        cursor: pointer;
      }
      .sug-name:hover {
        color: var(--accent);
      }
      .sug-follow-btn {
        width: 100%;
        padding: 5px 0;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--tr);
        border: none;
      }
      .sug-follow-btn.follow {
        background: var(--accent);
        color: #fff;
      }
      .sug-follow-btn.follow:hover {
        background: var(--accent-h);
      }
      .sug-follow-btn.unfollow {
        background: transparent;
        border: 1.5px solid var(--border);
        color: var(--txt2);
      }
      .sug-follow-btn.unfollow:hover {
        border-color: var(--rose);
        color: var(--rose);
      }
      .sug-follow-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .suggestions-empty {
        font-size: 13px;
        color: var(--txt3);
        text-align: center;
        padding: 12px 0;
      }
      .sug-skeleton {
        flex-shrink: 0;
        width: 120px;
        background: var(--card-hover);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .sug-skel-av {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--border);
        animation: sug-shimmer 1.4s infinite;
      }
      .sug-skel-line {
        height: 10px;
        border-radius: 5px;
        background: var(--border);
        animation: sug-shimmer 1.4s infinite;
      }
      .sug-skel-btn {
        width: 100%;
        height: 26px;
        border-radius: 20px;
        background: var(--border);
        animation: sug-shimmer 1.4s infinite;
        margin-top: 2px;
      }
      @keyframes sug-shimmer {
        0%,
        100% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
      }

      #toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(70px);
        background: var(--card);
        border: 1px solid var(--border2);
        color: var(--txt);
        padding: 11px 22px;
        border-radius: 30px;
        font-size: 13.5px;
        font-weight: 600;
        box-shadow: var(--shadow-lg);
        z-index: 9999;
        transition:
          transform var(--tr-spring),
          opacity 0.3s;
        opacity: 0;
        white-space: nowrap;
        pointer-events: none;
      }
      #toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }

      #offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #2a2a3a;
  color: #aaa;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid #333;
}
      .mobile-nav {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 10px 0 max(10px, env(safe-area-inset-bottom));
        z-index: 200;
        justify-content: space-around;
        transition: background 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .mobile-nav.nav-hidden {
        transform: translateY(100%);
      }

      /* ── Floating Action Button ── */
      .fab-create {
        display: none;
        position: fixed;
        bottom: calc(72px + max(10px, env(safe-area-inset-bottom)));
        right: 18px;
        z-index: 199;
        align-items: center;
        gap: 8px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 9999px;
        padding: 14px 20px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        cursor: pointer;
        box-shadow: 0 4px 20px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.3);
        transition: transform var(--tr-spring), box-shadow var(--tr), background var(--tr);
        will-change: transform;
      }
      .fab-create svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        flex-shrink: 0;
      }
      .fab-create:hover {
        background: var(--accent-h);
        transform: scale(1.06) translateY(-2px);
        box-shadow: 0 8px 28px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.35);
      }
      .fab-create:active {
        transform: scale(0.96);
        box-shadow: 0 2px 10px var(--accent-glow);
      }
      .fab-create.fab-hidden {
        display: none !important;
      }
      .fab-create {
        transition: transform var(--tr-spring), box-shadow var(--tr), background var(--tr), opacity 0.2s;
      }
      .mnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 14px;
        border-radius: 10px;
        color: var(--txt2);
        font-size: 10px;
        font-weight: 700;
        transition: color var(--tr);
        cursor: pointer;
        flex: 1;
        text-align: center;
        position: relative;
      }
      .mnav-item svg {
        width: 22px;
        height: 22px;
      }
      .mnav-item.active {
        color: var(--accent);
      }
      .mnav-item.active svg {
        filter: drop-shadow(0 0 4px var(--accent-glow));
      }
      .mnav-item.active::after {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--accent);
        position: absolute;
        bottom: 6px;
      }
      .mnav-icon-wrap {
        position: relative;
        display: inline-flex;
      }
      .mnav-dm-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: var(--rose);
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        padding: 0 4px;
        display: none;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }
      .mnav-dm-badge.show {
        display: flex;
      }

      .mnav-messages-wrap svg {
        width: 22px;
        height: 22px;
   
        font-family: var(--font-head);
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 12px;
        color: var(--txt2);
        text-transform: uppercase;
        letter-spacing: 0.07em;
      }
      .av-upload-wrap {
        position: relative;
        display: inline-block !important;
        cursor: pointer;
        flex-shrink: 0;
        align-self: flex-start;
        width: fit-content;
        max-width: fit-content;
        line-height: 0;
        font-size: 0;
      }
      /* Prevent the label from ever growing beyond its avatar child */
      .av-upload-wrap .av {
        display: grid;
      }
      /* Lock the label to exactly the avatar size so the hit area never bleeds */
      .av-upload-wrap:has(.av.lg) {
        width: 68px;
        height: 68px;
        border-radius: 20px;
      }
      .av-upload-wrap:has(.av.profile-lg) {
        width: 72px;
        height: 72px;
        border-radius: 50%;
      }
      .settings-av-preview .av-upload-wrap:has(.av.lg) {
        width: 72px;
        height: 72px;
        border-radius: 20px;
      }
      .av-upload-wrap input[type="file"] {
        display: none;
      }
      .av-upload-overlay {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(0, 0, 0, 0.55);
        display: grid;
        place-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--tr);
        color: #fff;
      }
      .av-upload-overlay svg {
        width: 20px;
        height: 20px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
      }
      .av-upload-badge {
        position: absolute;
        bottom: -3px;
        right: -3px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--accent);
        display: grid;
        place-items: center;
        border: 2px solid var(--bg);
        box-shadow: 0 2px 6px var(--accent-glow);
        transition: transform var(--tr-spring), opacity var(--tr);
        opacity: 0;
        pointer-events: none;
      }
      .av-upload-badge svg {
        width: 11px;
        height: 11px;
        fill: #fff;
      }
      .av-upload-wrap:hover .av-upload-overlay,
      .av-upload-wrap:focus-within .av-upload-overlay {
        opacity: 1;
      }
      .av-upload-wrap:hover .av-upload-badge,
      .av-upload-wrap:focus-within .av-upload-badge {
        opacity: 1;
        transform: scale(1.15);
      }
      /* Other-profile: view-photo mode — eye icon, no upload badge */
      .av-upload-wrap.av-view-mode .av-upload-badge { display: none; }
      .av-upload-wrap.av-view-mode { cursor: zoom-in; }
      /* Other-profile: no picture — not interactive */
      .av-upload-wrap.av-disabled-mode { cursor: default; }
      .av-upload-wrap.av-disabled-mode:hover .av-upload-overlay,
      .av-upload-wrap.av-disabled-mode:hover .av-upload-badge { opacity: 0; }
      /* ── Avatar action menu (own profile) — fixed so it floats above all layout ── */
      .av-action-menu {
        position: fixed;
        z-index: 9999;
        background: var(--card);
        border: 1px solid var(--border2);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
        min-width: 180px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.92);
        transform-origin: top left;
        transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34,1.4,0.64,1);
      }
      .av-action-menu.open {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
      }
      .av-action-item {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 16px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--txt);
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        border: none;
        background: none;
        font-family: inherit;
        width: 100%;
        text-align: left;
      }
      .av-action-item:hover { background: var(--accent-bg); color: var(--accent); }
      .av-action-item svg { width: 16px; height: 16px; flex-shrink: 0; }
      .av-action-item + .av-action-item { border-top: 1px solid var(--border); }
      .av img,
      .av.lg img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
        display: block;
      }
      .settings-av-preview {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 20px 0;
      }
      .settings-av-preview .av-upload-wrap .av.lg {
        width: 72px;
        height: 72px;
        font-size: 28px;
      }
      .settings-av-info {
        flex: 1;
      }
      .settings-av-info p {
        font-size: 13px;
        color: var(--txt2);
        margin-top: 4px;
        line-height: 1.5;
      }

      /* NOTIFICATIONS */
      .notif-btn {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: var(--txt2);
        transition:
          background var(--tr),
          color var(--tr);
        cursor: pointer;
        border: none;
        background: none;
        flex-shrink: 0;
      }
      .notif-btn:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .notif-btn svg {
        width: 18px;
        height: 18px;
      }
      .notif-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: var(--rose);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        display: none;
        place-items: center;
        padding: 0 4px;
        border: 2px solid var(--bg);
        line-height: 1;
      }
      .notif-badge.show {
        display: grid;
      }
      .notif-panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(380px, 100vw);
        background: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 500;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
      }
      .notif-panel.open {
        transform: translateX(0);
      }
      .notif-panel-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 499;
        display: none;
        backdrop-filter: blur(2px);
      }
      .notif-panel-backdrop.open {
        display: block;
      }
      .notif-panel-head {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid var(--border);
        gap: 12px;
        flex-shrink: 0;
      }
      .notif-panel-head h2 {
        font-family: var(--font-head);
        font-size: 17px;
        font-weight: 800;
        flex: 1;
      }

      .notif-close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: var(--txt2);
        cursor: pointer;
        border: none;
        background: none;
        transition:
          background var(--tr),
          color var(--tr);
      }
      .notif-close:hover {
        background: var(--card-hover);
        color: var(--txt);
      }
      .notif-close svg {
        width: 16px;
        height: 16px;
      }
      .notif-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
      }
      .notif-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 13px 20px;
        cursor: pointer;
        transition: background var(--tr);
        border-left: 3px solid transparent;
      }
      .notif-item:hover {
        background: var(--card-hover);
      }
      .notif-item.unread {
        background: var(--accent-bg);
        border-left-color: var(--accent);
      }
      .notif-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      .notif-icon.like {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .notif-icon.comment {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .notif-icon.reply {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .notif-icon.repost {
        background: var(--green-bg);
        color: var(--green);
      }
      .notif-icon.follow {
        background: var(--amber-bg);
        color: var(--amber);
      }
      .notif-icon.new_post {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .notif-icon.profile_pic {
        background: var(--green-bg);
        color: var(--green);
      }
      .notif-icon.mention {
        background: var(--rose-bg);
        color: var(--rose);
      }
      .notif-icon.milestone {
        background: var(--amber-bg);
        color: var(--amber);
      }
      .notif-body {
        flex: 1;
        min-width: 0;
      }
      .notif-text {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--txt);
      }
      .notif-text strong {
        font-weight: 700;
      }
      .notif-snippet {
        font-size: 12px;
        color: var(--txt2);
        margin-top: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .notif-time {
        font-size: 11px;
        color: var(--txt3);
        margin-top: 4px;
      }
      .notif-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
        margin-top: 5px;
      }
      .notif-empty {
        text-align: center;
        padding: 64px 20px;
        color: var(--txt2);
      }
      .notif-empty svg {
        width: 40px;
        height: 40px;
        margin: 0 auto 12px;
        display: block;
        color: var(--txt3);
      }
      .notif-empty p {
        font-size: 14px;
      }
      .nav-item .nav-badge {
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        background: var(--rose);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 0 5px;
        display: none;
        align-items: center;
        justify-content: center;
        margin-left: auto;
      }
      .nav-item .nav-badge.show {
        display: flex;
      }

      /* FOLLOW */
      .follow-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 18px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        border: none;
        transition: all var(--tr);
      }
      .follow-btn.follow {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 2px 12px var(--accent-glow);
      }
      .follow-btn.follow:hover {
        background: var(--accent-h);
        transform: translateY(-1px);
      }
      .follow-btn.unfollow {
        background: var(--card);
        color: var(--txt2);
        border: 1.5px solid var(--border);
      }
      .follow-btn.unfollow:hover {
        background: var(--rose-bg);
        color: var(--rose);
        border-color: var(--rose);
      }
      .follow-btn.following {
        background: var(--card);
        color: var(--accent);
        border: 1.5px solid var(--accent);
      }
      .follow-btn.following:hover {
        background: var(--accent-bg);
      }
      .follow-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
      }

      /* FEED TABS */
      .feed-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
      }
      .feed-tab {
        flex: 1;
        padding: 9px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 700;
        color: var(--txt2);
        background: var(--card);
        border: 1.5px solid var(--border);
        cursor: pointer;
        transition: all var(--tr);
        text-align: center;
      }
      .feed-tab.active {
        background: var(--accent-bg);
        border-color: var(--accent);
        color: var(--accent);
      }

      /* SEARCH */
      .search-bar-wrap {
        position: relative;
        margin-bottom: 20px;
      }
      .search-bar-wrap .search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 17px;
        color: var(--txt3);
        pointer-events: none;
      }
      .search-bar {
        width: 100%;
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: 30px;
        padding: 11px 16px 11px 42px;
        font-size: 14px;
        color: var(--txt);
        outline: none;
        transition:
          border-color var(--tr),
          box-shadow var(--tr);
      }
      .search-bar:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-bg);
      }
      .search-bar::placeholder {
        color: var(--txt3);
      }
      .search-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 18px;
      }
      .search-tab {
        flex: 1;
        padding: 9px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 700;
        color: var(--txt2);
        background: var(--card);
        border: 1.5px solid var(--border);
        cursor: pointer;
        transition: all var(--tr);
        text-align: center;
      }
      .search-tab.active {
        background: var(--accent-bg);
        border-color: var(--accent);
        color: var(--accent);
      }
      .search-results {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      /* ── Search skeleton loaders ── */
      .search-skel-post {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        animation: sug-shimmer 1.4s infinite;
      }
      .search-skel-post-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
      }
      .search-skel-av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--border2);
        flex-shrink: 0;
      }
      .search-skel-meta {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .search-skel-line {
        height: 11px;
        border-radius: 6px;
        background: var(--border2);
      }
      .search-skel-line.w-40 { width: 40%; }
      .search-skel-line.w-60 { width: 60%; }
      .search-skel-line.w-80 { width: 80%; }
      .search-skel-line.w-90 { width: 90%; }
      .search-skel-line.w-55 { width: 55%; }
      .search-skel-person {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 13px;
        animation: sug-shimmer 1.4s infinite;
      }
      .search-skel-person-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .search-skel-btn {
        width: 68px;
        height: 30px;
        border-radius: 20px;
        background: var(--border2);
        flex-shrink: 0;
      }
      .search-hint {
        text-align: center;
        padding: 48px 20px;
        color: var(--txt2);
      }
      .search-hint svg {
        width: 40px;
        height: 40px;
        margin: 0 auto 12px;
        display: block;
        color: var(--txt3);
      }
      .search-hint p {
        font-size: 14px;
      }
      .people-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 13px;
        transition:
          border-color var(--tr),
          box-shadow var(--tr);
      }
      .people-card:hover {
        border-color: var(--border2);
        box-shadow: var(--shadow);
      }
      .people-card-info {
        flex: 1;
        min-width: 0;
      }
      .people-card-name {
        font-size: 14px;
        font-weight: 700;
      }
      .people-card-email {
        font-size: 12px;
        color: var(--txt2);
        margin-top: 2px;
      }
      .people-card-posts {
        font-size: 11px;
        color: var(--txt3);
        margin-top: 4px;
      }
      mark.hl {
        background: var(--accent-bg);
        color: var(--accent);
        border-radius: 3px;
        padding: 0 2px;
        font-style: normal;
      }

      @media (min-width: 769px) {
        .topbar {
          display: none !important;
        }
        .mobile-nav {
          display: none !important;
        }
        .fab-create {
          display: none !important;
        }
      }
      @media (max-width: 768px) {
        .fab-create {
          display: flex;
        }
        .fab-create.fab-hidden {
          display: none !important;
        }
      }
      @media (max-width: 768px) {
        .sidebar {
          display: none !important;
        }
        .topbar {
          display: flex;
        }
        .mobile-nav {
          display: flex;
        }
        .shell {
          flex-direction: column;
        }
        .main {
          width: 100%;
          min-width: 0;
        }
        .content {
          padding: 16px 0 100px;
          max-width: 100%;
        }
        .post-card {
          border-radius: 0;
          border-left: none;
          border-right: none;
          margin-left: 0;
          margin-right: 0;
        }
        .post-detail-card {
          border-radius: 0;
          border-left: none;
          border-right: none;
        }
        .page-header {
          margin-bottom: 18px;
          padding: 0 14px;
        }
        .page-header h1 {
          font-size: 22px;
        }
        .auth-wrap {
          margin: 0 auto;
          padding: 16px 12px;
        }
        .auth-card {
          padding: 24px 18px;
          border-radius: 14px;
        }
        .compose {
          padding: 14px;
          display: none;
        }
        .post-body {
          font-size: 14px;
          padding: 8px 13px;
        }
        .post-head {
          padding: 12px 13px 0;
        }
        .post-actions {
          padding: 8px 10px;
          gap: 0;
        }
        .act-btn {
          padding: 7px 8px;
          font-size: 12px;
          gap: 4px;
        }
        .act-btn svg {
          width: 14px;
          height: 14px;
        }
        .comments-panel {
          padding: 12px 13px;
        }
        .profile-banner {
          height: 110px;
        }
        .profile-av-anchor {
          bottom: -22px;
          left: 16px;
        }
        .av.profile-lg {
          width: 56px;
          height: 56px;
          font-size: 22px;
        }
        .av-upload-wrap:has(.av.profile-lg) {
          width: 56px;
          height: 56px;
          border-radius: 50%;
        }
        .profile-meta {
          margin-top: 30px;
        }
        .settings-row {
          padding: 13px 14px;
          gap: 11px;
        }
        .settings-edit-form {
          padding: 14px;
        }
        .settings-save-row {
          flex-direction: column-reverse;
          gap: 8px;
        }
        .settings-save-row .btn {
          width: 100%;
          justify-content: center;
        }
        .danger-zone {
          padding: 16px;
        }
        .danger-zone .btn {
          width: 100%;
          justify-content: center;
        }
        .modal-backdrop {
          align-items: flex-end;
        }
        .modal {
          width: 100%;
          border-radius: var(--radius) var(--radius) 0 0;
          padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
          animation: slideUpMobile 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
        }
        @keyframes slideUpMobile {
          from {
            opacity: 0;
            transform: translateY(100%);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        #toast {
          bottom: 80px;
        }
        .feed-tabs {
          gap: 4px;
        }
        .feed-tab {
          font-size: 12px;
          padding: 8px;
        }
      }
      @media (max-width: 380px) {
        .content {
          padding: 12px 0 100px;
        }
        .page-header h1 {
          font-size: 20px;
        }
        .auth-card {
          padding: 20px 14px;
        }
        .act-btn {
          padding: 6px 6px;
          font-size: 11px;
        }
      }

      /* Lightbox thumbnail hover affordance */
      .lb-thumb {
        cursor: zoom-in !important;
        transition:
          transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
          box-shadow 0.22s ease,
          filter 0.22s ease;
      }
      .lb-thumb:hover {
        transform: scale(1.012);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
        filter: brightness(1.04);
      }
      .lb-thumb:active {
        transform: scale(0.98);
      }
      @keyframes lbFadeSlideDown {
        from {
          opacity: 0;
          transform: translateY(-10px) scale(0.94);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes lbCommentsSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
      }

      /* Comment items inside lightbox panel */
      .lb-comment-item {
        display: flex;
        gap: 11px;
        padding: 11px 16px;
        transition: background 0.15s;
      }
      .lb-comment-item:hover { background: rgba(255,255,255,0.04); }
      .lb-comment-av {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-family: var(--font-head);
        font-size: 13px;
        font-weight: 800;
        color: #fff;
        overflow: hidden;
      }
      .lb-comment-body { flex: 1; min-width: 0; }
      .lb-comment-author {
        font-size: 12.5px;
        font-weight: 700;
        color: rgba(255,255,255,0.85);
        margin-bottom: 3px;
      }
      .lb-comment-text {
        font-size: 13.5px;
        color: rgba(255,255,255,0.65);
        line-height: 1.5;
        word-break: break-word;
      }
      .lb-comment-time {
        font-size: 11px;
        color: rgba(255,255,255,0.28);
        margin-top: 4px;
      }
      .lb-comment-like-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        background: none;
        border: none;
        color: rgba(255,255,255,0.35);
        cursor: pointer;
        padding: 2px 4px;
        transition: color 0.15s;
      }
      .lb-comment-like-btn:hover { color: var(--rose); }
      .lb-comment-like-btn svg { width: 14px; height: 14px; }
      .lb-comment-like-btn span { font-size: 10px; font-weight: 700; }
      #lb-comments-list::-webkit-scrollbar { width: 4px; }
      #lb-comments-list::-webkit-scrollbar-track { background: transparent; }
      #lb-comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
      .lb-comment-reply-btn {
        display: inline-flex; align-items: center; gap: 4px;
        margin-top: 5px; font-size: 11.5px; font-weight: 700;
        color: rgba(255,255,255,0.35); background: none; border: none;
        cursor: pointer; padding: 2px 0; font-family: var(--font-body);
        transition: color 0.15s;
      }
      .lb-comment-reply-btn:hover { color: var(--accent); }
      .lb-comment-reply-btn svg { width: 11px; height: 11px; }
      .lb-view-replies-btn {
        display: inline-flex; align-items: center; gap: 5px;
        margin: 6px 0 2px; font-size: 11.5px; font-weight: 700;
        color: var(--accent); background: none; border: none;
        cursor: pointer; padding: 2px 0; font-family: var(--font-body);
        opacity: 0.8; transition: opacity 0.15s;
      }
      .lb-view-replies-btn:hover { opacity: 1; }
      .lb-view-replies-btn svg { width: 12px; height: 12px; }
      .lb-nested-replies { display: none; flex-direction: column; margin-top: 4px; border-left: 2px solid rgba(255,255,255,0.09); padding-left: 10px; }
      .lb-reply-to-banner {
        display: none; align-items: center; gap: 8px;
        padding: 7px 14px; background: rgba(124,107,255,0.12);
        border-top: 1px solid rgba(124,107,255,0.25);
        font-size: 12px; font-weight: 600; color: var(--accent);
        flex-shrink: 0;
      }
      .lb-reply-to-banner.visible { display: flex; }
      .lb-reply-cancel { margin-left:auto; background:none; border:none; color:var(--accent); font-size:16px; cursor:pointer; opacity:0.7; transition:opacity 0.15s; padding:0 2px; }
      .lb-reply-cancel:hover { opacity:1; }

      .lb-report-reason-btn {
        width: 100%;
        padding: 11px 14px;
        border-radius: 10px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.75);
        font-family: var(--font-body);
        font-size: 13.5px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: all 0.15s;
      }
      .lb-report-reason-btn:hover {
        background: rgba(255,95,122,0.12);
        border-color: rgba(255,95,122,0.3);
        color: #fff;
      }
      .lb-report-reason-btn.selected {
        background: rgba(255,95,122,0.18);
        border-color: var(--rose);
        color: #fff;
        font-weight: 700;
      }

     

      /* ═══════════════════ EXPLORE STYLES ═══════════════════ */
      .explore-section {
        margin-bottom: 28px;
      }
      .explore-section-title {
        font-family: var(--font-head);
        font-size: 16px;
        font-weight: 700;
        color: var(--txt);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .explore-section-title span {
        font-size: 18px;
      }
      .explore-refresh-btn {
        margin-left: auto;
        font-size: 12px;
        font-weight: 600;
        color: var(--txt3);
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid var(--border);
        transition: background var(--tr), color var(--tr), border-color var(--tr);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .explore-refresh-btn:hover {
        background: var(--accent-bg);
        color: var(--accent);
        border-color: var(--accent);
      }
      .explore-refresh-btn svg { transition: transform 0.4s; }
      .explore-refresh-btn.spinning svg { animation: sug-spin 0.6s linear infinite; }
      .explore-people-scroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
      }
      .explore-people-scroll::-webkit-scrollbar { display: none; }
      .explore-person-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 100px;
        max-width: 100px;
        padding: 16px 8px 12px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        cursor: pointer;
        transition: background var(--tr), border-color var(--tr), transform var(--tr-spring);
        flex-shrink: 0;
      }
      .explore-person-card:hover {
        background: var(--card-hover);
        border-color: var(--border2);
        transform: translateY(-2px);
      }
      .explore-person-av {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        overflow: hidden;
        flex-shrink: 0;
      }
      .explore-person-name {
        font-size: 12px;
        font-weight: 700;
        color: var(--txt);
        text-align: center;
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .explore-person-meta {
        font-size: 10px;
        color: var(--txt3);
        text-align: center;
      }
      .explore-person-follow {
        font-size: 11px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 20px;
        border: 1.5px solid var(--accent);
        color: var(--accent);
        background: transparent;
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        white-space: nowrap;
      }
      .explore-person-follow:hover,
      .explore-person-follow.following {
        background: var(--accent);
        color: #fff;
      }
      .explore-trending-empty {
        text-align: center;
        padding: 32px 16px;
        color: var(--txt3);
        font-size: 14px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .explore-skeleton-row {
        display: flex;
        gap: 12px;
        overflow: hidden;
      }
      .explore-skel-card {
        min-width: 100px;
        height: 160px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        flex-shrink: 0;
        animation: sug-shimmer 1.4s infinite;
      }
      .explore-post-skeleton {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px;
        margin-bottom: 12px;
        animation: sug-shimmer 1.4s infinite;
        height: 100px;
      }

      /* ── Trending Router (category tabs) ── */
      .trending-router {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }
      .trending-route-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 13px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        color: var(--txt2);
        background: var(--card);
        border: 1.5px solid var(--border);
        cursor: pointer;
        transition: all var(--tr);
        white-space: nowrap;
      }
      .trending-route-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-bg);
      }
      .trending-route-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }

      /* ── Trending Controller (sort + filter bar) ── */
      .trending-controller {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        flex-wrap: wrap;
      }
      .trending-sort-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--txt3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-right: 2px;
        white-space: nowrap;
      }
      .trending-sort-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        color: var(--txt2);
        background: var(--card);
        border: 1.5px solid var(--border);
        cursor: pointer;
        transition: all var(--tr);
        white-space: nowrap;
      }
      .trending-sort-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-bg);
      }
      .trending-sort-btn.active {
        background: var(--accent-bg);
        border-color: var(--accent);
        color: var(--accent);
      }
      .trending-sort-btn svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
      }
      .trending-route-btn svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
      }
      .trending-controller-spacer { flex: 1; }
      .trending-count-badge {
        font-size: 11px;
        font-weight: 700;
        color: var(--txt3);
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--card);
        white-space: nowrap;
      }
      .pw-wrap {
        position: relative;
      }
      .pw-wrap input {
        padding-right: 44px !important;
      }
      .pw-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        color: var(--txt3);
        cursor: pointer;
        border: none;
        background: none;
        border-radius: 6px;
        transition: color var(--tr);
        flex-shrink: 0;
      }
      .pw-toggle:hover { color: var(--accent); }
      .pw-toggle svg { width: 16px; height: 16px; pointer-events: none; }

      /* ── Phone auth ─────────────────────────────────────────── */
      .auth-method-tabs {
        display: flex;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 3px;
        margin-bottom: 22px;
        gap: 3px;
      }
      .auth-method-tab {
        flex: 1;
        padding: 8px 10px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 700;
        color: var(--txt2);
        background: none;
        border: none;
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .auth-method-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
      .auth-method-tab.active {
        background: var(--card);
        color: var(--accent);
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
      }
      .phone-input-wrap {
        display: flex;
        gap: 8px;
        align-items: stretch;
        width: 100%;
      }
      .phone-dial-select {
        flex: 0 0 88px;
        width: 88px;
        max-width: 88px;
        background-color: var(--bg);
        background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%239090aa' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 6px center;
        background-size: 12px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 11px 22px 11px 8px;
        font-size: 13px;
        color: var(--txt);
        outline: none;
        cursor: pointer;
        transition: border-color var(--tr);
        appearance: none;
        -webkit-appearance: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
      .phone-dial-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
      .phone-number-input {
        flex: 1 1 0%;
        min-width: 0;
        width: 0;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 11px 14px;
        font-size: 14px;
        color: var(--txt);
        outline: none;
        transition: border-color var(--tr), box-shadow var(--tr);
        box-sizing: border-box;
      }
      .phone-number-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
      .phone-number-input::placeholder { color: var(--txt3); }
      .otp-group {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin: 4px 0 20px;
      }
      .otp-digit {
        width: 48px;
        height: 56px;
        text-align: center;
        font-size: 22px;
        font-weight: 800;
        font-family: var(--font-head);
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--txt);
        outline: none;
        transition: border-color var(--tr), box-shadow var(--tr);
        caret-color: var(--accent);
      }
      .otp-digit:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-bg);
      }
      .otp-digit.filled { border-color: var(--accent); }
      .otp-sent-info {
        text-align: center;
        font-size: 13px;
        color: var(--txt2);
        margin-bottom: 16px;
        line-height: 1.5;
      }
      .otp-sent-info strong { color: var(--txt); }
      .otp-resend-row {
        text-align: center;
        font-size: 13px;
        color: var(--txt2);
        margin-top: 14px;
      }
      .otp-resend-row button {
        color: var(--accent);
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
      }
      .otp-resend-row button:disabled { color: var(--txt3); cursor: default; }
      .otp-timer { font-variant-numeric: tabular-nums; }
      .phone-step { display: none; }
      .phone-step.active { display: block; }
      @keyframes otpShake {
        0%,100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(4px); }
      }
      .profile-bio {
        font-size: 13.5px;
        color: var(--txt2);
        margin-top: 8px;
        line-height: 1.55;
        max-width: 340px;
      }

      /* ═══════════════════ PROFILE ABOUT PANEL ═══════════════ */
      .about-section-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--txt3);
        margin: 18px 0 10px;
      }
      .about-section-title:first-child { margin-top: 4px; }
      .about-row {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 9px 0;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
        color: var(--txt);
        line-height: 1.45;
      }
      .about-row:last-child { border-bottom: none; }
      .about-row-icon {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: var(--accent-bg);
        color: var(--accent);
        display: grid;
        place-items: center;
        margin-top: 1px;
      }
      .about-row-icon svg { width: 15px; height: 15px; }
      .about-row-body { flex: 1; min-width: 0; }
      .about-row-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--txt3);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 1px;
      }
      .about-row-value { word-break: break-word; }
      .about-row-value a {
        color: var(--accent);
        text-decoration: none;
      }
      .about-row-value a:hover { text-decoration: underline; }
      .about-empty {
        text-align: center;
        padding: 32px 16px;
        color: var(--txt3);
        font-size: 14px;
      }

      /* ═══════════════════ NEW MEMBERS CARD ══════════════════ */
      .feed-new-card {
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 12px;
        overflow: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: background 0.3s, opacity 0.35s ease, transform 0.35s ease;
      }
      .feed-new-card.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .feed-new-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        background: var(--accent-bg);
        border-bottom: 1px solid var(--border);
      }
      .feed-new-banner-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 800;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 0.07em;
      }
      .feed-new-banner-label svg {
        width: 13px;
        height: 13px;
      }
      .feed-new-dismiss {
        font-size: 11px;
        color: var(--txt3);
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 20px;
        transition: background var(--tr), color var(--tr);
        font-weight: 600;
      }
      .feed-new-dismiss:hover {
        background: var(--accent-bg);
        color: var(--accent);
      }
      .feed-new-row {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 14px 16px;
        cursor: pointer;
        transition: background var(--tr);
      }
      .feed-new-row:hover { background: var(--card-hover); }
      .feed-new-info {
        flex: 1;
        min-width: 0;
      }
      .feed-new-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--txt);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .feed-new-joined {
        font-size: 12px;
        color: var(--accent);
        font-weight: 600;
        margin-top: 2px;
      }
      .feed-new-follow-btn {
        font-size: 13px;
        font-weight: 700;
        padding: 7px 18px;
        border-radius: 20px;
        border: 1.5px solid var(--accent);
        background: none;
        color: var(--accent);
        cursor: pointer;
        transition: all var(--tr);
        white-space: nowrap;
        flex-shrink: 0;
      }
      .feed-new-follow-btn:hover {
        background: var(--accent);
        color: #fff;
      }
      .feed-new-follow-btn.following {
        background: var(--accent-bg);
        color: var(--accent);
        border-color: var(--accent);
        opacity: 0.7;
      }
      .feed-new-bio {
        font-size: 12px;
        color: var(--txt2);
        margin-top: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Explore new members section */
      .explore-new-card {
        background: rgba(34, 212, 143, 0.06);
        border: 1.5px solid var(--green);
        border-radius: var(--radius);
        padding: 16px;
        margin-bottom: 14px;
      }
    
      /* ── Compose full-tab view ─────────────────────────────── */
      #view-compose {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 150;
        background: var(--bg);
        flex-direction: column;
        overflow: hidden;
      }
      #view-compose.active {
        display: flex;
      }
      @media (min-width: 768px) {
        #view-compose {
          background: rgba(0,0,0,0.55);
          backdrop-filter: blur(4px);
          align-items: center;
          justify-content: center;
        }
        #view-compose.active {
          display: flex;
        }
        .compose-tab-inner {
          width: 100%;
          max-width: 580px;
          max-height: 80vh;
          background: var(--bg);
          border-radius: var(--radius);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-shadow: var(--shadow-lg);
          border: 1px solid var(--border);
        }
        .compose-tab-media-preview {
          max-height: 220px;
        }
        .compose-tab-media-preview img,
        .compose-tab-media-preview video {
          max-height: 220px;
        }
      }
      .compose-tab-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .compose-tab-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        flex-shrink: 0;
        height: 56px;
        box-sizing: border-box;
      }
      .compose-tab-cancel {
        background: none;
        border: none;
        font-size: 15px;
        color: var(--txt2);
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 20px;
        transition: background 0.15s;
      }
      .compose-tab-cancel:hover { background: var(--card-hover); }
      .compose-tab-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--txt);
      }
      .compose-tab-post-btn {
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 20px;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.15s;
      }
      .compose-tab-post-btn:disabled { opacity: 0.5; cursor: not-allowed; }
      .compose-tab-progress {
        height: 3px;
        width: 100%;
        background: var(--border);
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.2s;
        flex-shrink: 0;
      }
      .compose-tab-progress.active {
        opacity: 1;
      }
      .compose-tab-progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent), var(--accent-h));
        border-radius: 0 2px 2px 0;
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 8px var(--accent-glow);
      }
      .compose-tab-body {
        flex: 1;
        display: flex;
        padding: 16px;
        gap: 12px;
        overflow-y: auto;
        min-height: 0;
      }
      .compose-tab-av { flex-shrink: 0; }
      .compose-tab-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .compose-tab-textarea {
        width: 100%;
        background: none;
        border: none;
        outline: none;
        font-size: 17px;
        color: var(--txt);
        resize: none;
        min-height: 200px;
        line-height: 1.5;
        font-family: inherit;
      }
      .compose-tab-textarea::placeholder { color: var(--txt2); }
      .compose-tab-media-preview {
        display: none;
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        max-height: 300px;
      }
      .compose-tab-media-preview img,
      .compose-tab-media-preview video {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
      }
      .compose-tab-media-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .compose-tab-toolbar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 16px max(10px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--bg);
        position: sticky;
        bottom: 0;
        z-index: 5;
        flex-shrink: 0;
      }
      .compose-tab-tool {
        background: none;
        border: none;
        color: var(--accent);
        cursor: pointer;
        padding: 8px 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        transition: background 0.15s;
      }
      .compose-tab-tool:hover { background: var(--card-hover); }
      .compose-tab-tool svg { width: 20px; height: 20px; flex-shrink: 0; }
      .compose-tab-char-count {
        margin-left: auto;
        font-size: 12px;
        color: var(--txt2);
      }
      .compose-tab-char-count.warn { color: #f59e0b; }
      .compose-tab-char-count.over { color: #ef4444; }
      /* ── Post-card link preview ──────────────────── */
      .post-link-preview {
        border: 1.5px solid var(--border2);
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin: 10px 0 4px;
        background: var(--bg);
        animation: fadeUp 0.2s ease both;
        text-decoration: none;
      }
      .post-link-preview-inner {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: background 0.15s;
      }
      .post-link-preview-inner:hover {
        background: var(--surface);
      }
      .post-link-preview-img-wrap {
        width: 100%;
        height: 140px;
        overflow: hidden;
        background: var(--surface);
      }
      .post-link-preview-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .post-link-preview-body {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .post-link-preview-loading {
        padding: 14px 12px;
        font-size: 12.5px;
        color: var(--txt3);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .post-link-preview-loading::before {
        content: '';
        width: 14px;
        height: 14px;
        border: 2px solid var(--border2);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        flex-shrink: 0;
      }
      .compose-link-preview {
        position: relative;
        border: 1.5px solid var(--border2);
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin-top: 10px;
        background: var(--bg);
        animation: fadeUp 0.2s ease both;
      }
      .compose-link-preview-dismiss {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(0,0,0,0.45);
        color: #fff;
        font-size: 11px;
        display: grid;
        place-items: center;
        border: none;
        cursor: pointer;
        z-index: 2;
        line-height: 1;
      }
      .compose-link-preview-img-wrap {
        width: 100%;
        height: 140px;
        overflow: hidden;
        background: var(--surface);
      }
      .compose-link-preview-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .compose-link-preview-body {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .compose-link-preview-domain {
        font-size: 11px;
        color: var(--txt3);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
      }
      .compose-link-preview-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--txt);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .compose-link-preview-desc {
        font-size: 12px;
        color: var(--txt2);
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .compose-link-preview-loading {
        padding: 14px 12px;
        font-size: 12.5px;
        color: var(--txt3);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .compose-link-preview-loading::before {
        content: '';
        width: 14px;
        height: 14px;
        border: 2px solid var(--border2);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        flex-shrink: 0;
      }
      @keyframes spin { to { transform: rotate(360deg); } }

      /* ── Back Button ──────────────────────────────────────────── */
      .back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: var(--txt2);
        background: var(--card);
        border: 1.5px solid var(--border);
        cursor: pointer;
        transition: all var(--tr);
        margin-bottom: 14px;
        font-family: var(--font-body);
        flex-shrink: 0;
      }
      .back-btn:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: var(--accent-bg);
        transform: translateX(-2px);
      }
      .back-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }


      /* ══════════════════════════════════════════════════════════
         GROUPS — CSS  (dark · refined · premium redesign)
      ══════════════════════════════════════════════════════════ */

      /* ── Section label ────────────────────────────────────── */
      .groups-section-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--txt3);
        margin-bottom: 14px;
      }
      .groups-section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
      }

      /* ── My Groups strip ──────────────────────────────────── */
      .my-groups-strip-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--txt3);
        margin-bottom: 14px;
      }
      .my-groups-strip-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
      }
      .my-groups-strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        margin-bottom: 28px;
        scrollbar-width: none;
      }
      .my-groups-strip::-webkit-scrollbar { display: none; }

      /* Chip — horizontal pill, not icon stack */
      .my-group-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        flex-shrink: 0;
        padding: 7px 12px 7px 7px;
        border-radius: 40px;
        border: 1px solid var(--border);
        background: var(--card);
        transition: border-color var(--tr), background var(--tr), transform var(--tr-spring);
      }
      .my-group-chip:hover {
        border-color: var(--border2);
        background: var(--card-hover);
        transform: translateY(-1px);
      }
      .my-group-chip-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--accent-bg);
      }
      .my-group-chip-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
      .my-group-chip-icon svg { width: 13px; height: 13px; stroke: var(--accent); }
      .my-group-chip-name {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--txt);
        white-space: nowrap;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ── Groups grid ──────────────────────────────────────── */
      .groups-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px;
      }
      @media (max-width: 480px) {
        .groups-grid { grid-template-columns: 1fr; }
      }

      /* Card — borderless, inset glass look */
      .group-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr-spring), background 0.3s;
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .group-card:hover {
        border-color: var(--border2);
        box-shadow: 0 8px 32px rgba(0,0,0,0.45);
        transform: translateY(-2px);
      }

      /* Cover — tall strip, icon centred, subtle scrim */
      .group-card-cover {
        height: 64px;
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
        background: var(--surface);
      }
      .group-card-cover::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%);
      }
      .group-card-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

      /* Placeholder cover: dark monochrome, icon only */
      .group-card-cover-placeholder {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: var(--surface);
      }
      .group-card-cover-placeholder svg {
        width: 22px;
        height: 22px;
        stroke: var(--txt3);
        stroke-width: 1.5;
        fill: none;
        opacity: 0.55;
      }

      .group-card-body {
        padding: 11px 13px 13px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .group-card-name {
        font-family: var(--font-head);
        font-size: 13.5px;
        font-weight: 700;
        color: var(--txt);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -0.2px;
      }
      .group-card-desc {
        font-size: 11.5px;
        color: var(--txt2);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1;
        margin-top: 1px;
      }
      .group-card-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        font-size: 11px;
        color: var(--txt3);
        font-weight: 600;
        letter-spacing: 0.01em;
      }
      .group-card-meta span { display: flex; align-items: center; gap: 3px; }
      .group-card-meta svg { width: 11px; height: 11px; }

      /* Join button — slim hairline style */
      .group-card-join-btn {
        margin-top: 10px;
        padding: 6px 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all var(--tr);
        width: 100%;
        letter-spacing: 0.02em;
      }
      .group-card-join-btn.join {
        background: transparent;
        color: var(--accent);
        border: 1px solid rgba(124,107,255,0.35);
      }
      .group-card-join-btn.join:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        box-shadow: 0 2px 12px var(--accent-glow);
      }
      .group-card-join-btn.joined {
        background: transparent;
        color: var(--txt3);
        border: 1px solid var(--border);
      }
      .group-card-join-btn.joined:hover {
        color: var(--rose);
        border-color: rgba(255,95,122,0.4);
        background: var(--rose-bg);
      }

      /* Load more */
      .groups-load-more {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: none;
        color: var(--txt3);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all var(--tr);
        margin-bottom: 20px;
        letter-spacing: 0.02em;
      }
      .groups-load-more:hover {
        border-color: var(--border2);
        color: var(--txt);
        background: var(--card);
      }

      /* Group skeleton */
      .group-skel-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        animation: shimmer 1.4s infinite;
      }
      .group-skel-cover { height: 64px; background: var(--surface); }
      .group-skel-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
      .group-skel-line { height: 10px; border-radius: 5px; background: var(--border); }
      .group-skel-line.w-60 { width: 60%; }
      .group-skel-line.w-80 { width: 80%; }
      .group-skel-line.w-40 { width: 40%; }
      .group-skel-btn { height: 28px; border-radius: 8px; background: var(--border); margin-top: 4px; }

      /* ══ Group Detail view ═══════════════════════════════════ */
      .group-detail-banner {
        height: 130px;
        border-radius: 14px;
        margin-bottom: 16px;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
        background: var(--surface);
        border: 1px solid var(--border);
      }
      .group-detail-banner::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
        pointer-events: none;
      }
      .group-detail-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
      }
      .group-detail-meta {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
      }
      .group-detail-info { flex: 1; min-width: 0; }
      .group-detail-name {
        font-family: var(--font-head);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.4px;
        margin-bottom: 4px;
        color: var(--txt);
      }
      .group-detail-desc {
        font-size: 13px;
        color: var(--txt2);
        line-height: 1.55;
        margin-bottom: 10px;
      }
      .group-detail-stats {
        display: flex;
        gap: 14px;
        font-size: 11.5px;
        color: var(--txt3);
        font-weight: 600;
        letter-spacing: 0.01em;
      }
      .group-detail-stats span { display: flex; align-items: center; gap: 4px; }
      .group-detail-stats svg { width: 12px; height: 12px; }
      .group-join-btn {
        flex-shrink: 0;
        padding: 8px 18px;
        border-radius: 9px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all var(--tr);
        white-space: nowrap;
        letter-spacing: 0.02em;
      }
      .group-join-btn.join {
        background: transparent;
        color: var(--accent);
        border: 1px solid rgba(124,107,255,0.4);
      }
      .group-join-btn.join:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        box-shadow: 0 4px 16px var(--accent-glow);
      }
      .group-join-btn.joined {
        background: transparent;
        color: var(--txt3);
        border: 1px solid var(--border);
      }
      .group-join-btn.joined:hover {
        color: var(--rose);
        border-color: rgba(255,95,122,0.4);
        background: var(--rose-bg);
      }
      .group-detail-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 18px;
      }
      .group-detail-tab {
        padding: 10px 16px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--txt3);
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
        border-bottom: 1.5px solid transparent;
        margin-bottom: -1px;
        transition: color var(--tr), border-color var(--tr);
        letter-spacing: 0.02em;
      }
      .group-detail-tab.active {
        color: var(--txt);
        border-bottom-color: var(--txt);
      }
      .group-detail-tab:hover:not(.active) { color: var(--txt2); }

      /* ── Group card entrance stagger ──────────────────────── */
      @keyframes groupCardIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .groups-grid .group-card {
        animation: groupCardIn 0.28s ease both;
      }
      .groups-grid .group-card:nth-child(1) { animation-delay: 0ms; }
      .groups-grid .group-card:nth-child(2) { animation-delay: 40ms; }
      .groups-grid .group-card:nth-child(3) { animation-delay: 80ms; }
      .groups-grid .group-card:nth-child(4) { animation-delay: 120ms; }
      .groups-grid .group-card:nth-child(5) { animation-delay: 160ms; }
      .groups-grid .group-card:nth-child(6) { animation-delay: 200ms; }
      .group-compose {
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        padding: 14px 16px;
        margin-bottom: 14px;
      }
      .group-compose-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }
      .group-compose-field {
        flex: 1;
        background: var(--input-bg, var(--bg));
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 9px 14px;
        font-size: 14px;
        color: var(--txt);
        resize: none;
        min-height: 42px;
        max-height: 140px;
        overflow-y: auto;
        font-family: inherit;
        line-height: 1.45;
        transition: border-color .15s;
      }
      .group-compose-field::placeholder { color: var(--txt2); }
      .group-compose-field:focus { outline: none; border-color: var(--accent); }
      .group-compose-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
      }
      .group-compose-tools { display: flex; gap: 4px; }
      .group-compose-tool {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--txt2);
        padding: 6px 8px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        transition: background .15s, color .15s;
      }
      .group-compose-tool:hover { background: var(--card-hover); color: var(--accent); }
      .group-compose-tool svg { width: 18px; height: 18px; }
      .group-compose-submit {
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 20px;
        padding: 7px 18px;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity .15s;
      }
      .group-compose-submit:disabled { opacity: 0.5; cursor: not-allowed; }
      .group-compose-media-preview {
        margin-top: 10px;
        position: relative;
        display: none;
      }
      .group-compose-media-preview.has-media { display: block; }
      .group-compose-media-preview img,
      .group-compose-media-preview video {
        max-width: 100%;
        max-height: 200px;
        border-radius: 10px;
        object-fit: cover;
        display: block;
      }
      .group-compose-remove-media {
        position: absolute;
        top: 6px; right: 6px;
        background: rgba(0,0,0,.55);
        border: none;
        border-radius: 50%;
        width: 26px; height: 26px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; color: #fff;
      }

      /* ── Group badge on post cards ─────────────────────────── */
      .post-group-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11.5px;
        color: var(--accent);
        background: var(--accent-bg, rgba(99,102,241,.08));
        border-radius: 20px;
        padding: 2px 8px;
        margin-top: 4px;
        cursor: pointer;
        font-weight: 500;
        border: 1px solid var(--accent-glow, rgba(99,102,241,.18));
        transition: background .15s;
        width: fit-content;
      }
      .post-group-badge:hover { background: var(--accent-glow, rgba(99,102,241,.18)); }
      .post-group-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

      /* Guest join nudge inside group feed */
      .group-join-nudge {
        background: linear-gradient(135deg, var(--accent-bg), var(--card));
        border: 1.5px solid var(--accent-glow);
        border-radius: var(--radius);
        padding: 16px 18px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 13.5px;
      }
      .group-join-nudge-icon {
        width: 40px; height: 40px; border-radius: 12px;
        background: var(--accent); display: grid; place-items: center;
        color: #fff; flex-shrink: 0;
      }
      .group-join-nudge-icon svg { width: 20px; height: 20px; }
      .group-join-nudge-body { flex: 1; }
      .group-join-nudge-title { font-weight: 700; color: var(--txt); margin-bottom: 3px; }
      .group-join-nudge-sub { font-size: 12.5px; color: var(--txt2); margin-bottom: 10px; }
/* ══════════════════════════════════════════════════════════════
   ARTICLES  — Circle-native article cards & interactions
   ══════════════════════════════════════════════════════════════ */

/* ── Article card ──────────────────────────────────────────── */
.art-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr), transform var(--tr-spring), box-shadow var(--tr);
  animation: artCardIn 0.28s ease both;
}
.art-card:hover {
  background: var(--card-hover);
  border-color: var(--border2);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
@keyframes artCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.art-card:nth-child(1) { animation-delay: 0ms; }
.art-card:nth-child(2) { animation-delay: 45ms; }
.art-card:nth-child(3) { animation-delay: 90ms; }
.art-card:nth-child(4) { animation-delay: 135ms; }
.art-card:nth-child(5) { animation-delay: 180ms; }
.art-card:nth-child(6) { animation-delay: 225ms; }

.art-card-cover {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  background: var(--surface);
  flex-shrink: 0;
}
.art-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.art-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.art-card-date {
  font-size: 11.5px;
  color: var(--txt3);
  font-weight: 500;
}
.art-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.art-card-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--accent-bg);
  color: var(--accent);
  letter-spacing: 0.01em;
  border: 1px solid var(--accent-glow);
}
.art-card-title {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.4;
  margin-bottom: 7px;
  letter-spacing: -0.2px;
}
.art-card-excerpt {
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.art-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-card-author-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-bg);
  flex-shrink: 0;
}
.art-card-author-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt2);
}

/* ── Article reaction bar ─────────────────────────────────── */
.art-card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.art-act-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--tr), transform var(--tr);
  font-family: inherit;
}
.art-act-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.art-act-btn:hover { color: var(--accent); transform: scale(1.12); }
.art-act-btn.liked { color: var(--rose); }
.art-act-btn.liked svg { fill: var(--rose); stroke: var(--rose); }
.art-act-btn.echoed { color: var(--green); }

/* ── Category pills (top of articles view) ────────────────── */
.art-cat-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--txt2);
  cursor: pointer;
  transition: all var(--tr);
  font-family: inherit;
  letter-spacing: 0.01em;
}
.art-cat-pill:hover,
.art-cat-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 12px var(--accent-glow);
}

/* ── Pagination buttons ────────────────────────────────────── */
#art-prev-btn:not(:disabled),
#art-next-btn:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}
#art-prev-btn:not(:disabled):hover,
#art-next-btn:not(:disabled):hover {
  background: var(--accent-h);
}

/* ── Empty / loading state ─────────────────────────────────── */
.art-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--txt3);
  font-size: 14px;
}
.art-skel {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.art-skel-cover {
  width: 100%;
  height: 170px;
  background: var(--border);
  animation: shimmer 1.4s infinite linear;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--border) 25%, var(--border2) 50%, var(--border) 75%);
}
.art-skel-body { padding: 14px 16px; }
.art-skel-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-image: linear-gradient(90deg, var(--border) 25%, var(--border2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.art-skel-line.w-80 { width: 80%; }
.art-skel-line.w-60 { width: 60%; }
.art-skel-line.w-40 { width: 40%; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Select dark-mode override ─────────────────────────────── */
[data-theme="dark"] #art-tag-filter,
[data-theme="dark"] #art-search {
  color-scheme: dark;
}