*{box-sizing:border-box}
    body{background:#0c0a08;font-family:'DM Sans',sans-serif;margin:0;min-height:100vh;color:#ede0cc}

    /* ─── TRANSITIONS — uniquement sur les éléments qui en ont besoin ─── */
    button, a, input, .action-button, .sidebar-item, .filter-tab, .write-action,
    .professional-card, .pc-post-card, .icon-btn, .write-placeholder,
    .sidebar-user-card, .publish-btn {
      transition: all 0.18s cubic-bezier(.4,0,.2,1);
    }
    /* Réduire les animations si demandé */
    .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }

    /* ─── REELS SECTION ─── */
    #reels-scroll-mobile::-webkit-scrollbar,
    #reels-scroll-pc::-webkit-scrollbar { display:none; }

    .reel-card {
      flex-shrink:0; width:120px; border-radius:12px; overflow:hidden;
      cursor:pointer; position:relative; background:#0c0a08;
      border:1px solid #2a221c; transition:transform .2s, border-color .2s;
    }
    .reel-card:hover { transform:translateY(-3px); border-color:rgba(224,123,53,.4); }
    .reel-card-thumb {
      width:100%; height:180px; object-fit:cover; display:block;
      background:linear-gradient(135deg,#1a1612,#141210);
    }
    .reel-card-overlay {
      position:absolute; inset:0;
      background:linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 50%);
      display:flex; align-items:center; justify-content:center;
    }
    .reel-card-play {
      width:36px; height:36px; border-radius:50%;
      background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
      border:1.5px solid rgba(255,255,255,.25);
      display:flex; align-items:center; justify-content:center;
      transition:transform .2s;
    }
    .reel-card:hover .reel-card-play { transform:scale(1.1); }
    .reel-card-info {
      position:absolute; bottom:0; left:0; right:0;
      padding:8px 8px 7px;
    }
    .reel-card-name {
      font-size:.62rem; font-weight:600; color:rgba(255,255,255,.9);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      margin-bottom:2px; font-family:'Syne',sans-serif;
    }
    .reel-card-views {
      font-size:.57rem; color:rgba(255,255,255,.65);
      display:flex; align-items:center; gap:3px;
    }
    .reel-card-badge {
      position:absolute; top:7px; right:7px;
      background:#e07b35; color:#0c0a08;
      font-size:.5rem; font-weight:800; padding:2px 6px;
      border-radius:20px; letter-spacing:.3px;
    }
    /* PC réels sont plus larges */
    @media(min-width:768px){
      .reel-card { width:140px; }
      .reel-card-thumb { height:210px; }
    }

    /* ─── CHALLENGES HORIZONTAL SCROLL ─── */
    #challenges-scroll-mobile::-webkit-scrollbar,
    #challenges-scroll-pc::-webkit-scrollbar { display:none; }
    #challenges-scroll-mobile,
    #challenges-scroll-pc { scrollbar-width:none; }

    /* ─── SCROLLBAR ─── */
    ::-webkit-scrollbar{width:4px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:#3d3028;border-radius:4px}
    ::-webkit-scrollbar-thumb:hover{background:#e07b35}

    /* ─── LAYOUT ─── */
    .main-container{display:flex;min-height:100vh}

    /* ─── SIDEBAR ─── */
    .sidebar{
      width:260px;min-width:260px;background:#141210;
      border-right:1px solid #2a221c;height:100vh;position:sticky;top:0;
      display:flex;flex-direction:column;padding:28px 16px;overflow-y:auto
    }
    .sidebar-logo{
      font-family:'Syne',sans-serif;font-weight:800;font-size:1.7rem;
      letter-spacing:-1px;color:#ede0cc;padding:0 8px;margin-bottom:32px
    }
    .sidebar-logo span{color:#e07b35}
    .nav-section-label{
      font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
      color:#3d3028;padding:0 8px;margin:20px 0 8px
    }
    .sidebar-nav{display:flex;flex-direction:column;gap:2px}
    .sidebar-item{
      display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
      color:#9a8878;font-size:0.9rem;font-weight:500;cursor:pointer;
      transition:all 0.2s ease;position:relative;text-decoration:none
    }
    .sidebar-item:hover{background:rgba(224,123,53,0.08);color:#ede0cc}
    .sidebar-item.active{background:rgba(224,123,53,0.12);color:#e07b35}
    .sidebar-item.active::before{
      content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
      width:3px;height:60%;background:#e07b35;border-radius:0 3px 3px 0
    }
    .sidebar-item svg{width:18px;height:18px;flex-shrink:0}
    .notification-badge{
      margin-left:auto;background:#e07b35;color:#0c0a08;font-size:10px;
      font-weight:700;width:18px;height:18px;border-radius:50%;
      display:flex;align-items:center;justify-content:center
    }
    .sidebar-user-card{
      margin-top:auto;padding:14px 12px;border-radius:12px;
      background:#1a1612;border:1px solid #2a221c;display:flex;
      align-items:center;gap:10px;cursor:pointer;transition:border-color 0.2s
    }
    .sidebar-user-card:hover{border-color:rgba(224,123,53,0.3)}

    /* ─── CONTENT ─── */
    .content{flex:1;height:100vh;overflow-y:auto}

    /* ─── PC HEADER (topbar) ─── */
    .pc-header{
      position:sticky;top:0;z-index:50;background:rgba(12,10,8,0.9);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid #2a221c;padding:14px 24px;
      display:flex;align-items:center;gap:16px
    }
    .pc-header-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:#ede0cc}
    .pc-search-bar{
      flex:1;max-width:380px;margin-left:auto;background:#1a1612;
      border:1px solid #2a221c;border-radius:10px;display:flex;
      align-items:center;gap:10px;padding:8px 14px;transition:border-color 0.2s,box-shadow 0.2s
    }
    .pc-search-bar:focus-within{border-color:rgba(224,123,53,0.5);box-shadow:0 0 0 3px rgba(224,123,53,0.07)}
    .pc-search-bar input{background:transparent;border:none;outline:none;color:#ede0cc;font-size:0.875rem;font-family:'DM Sans',sans-serif;flex:1}
    .pc-search-bar input::placeholder{color:#3d3028}
    .icon-btn{
      width:38px;height:38px;border-radius:10px;background:#1a1612;
      border:1px solid #2a221c;display:flex;align-items:center;justify-content:center;
      cursor:pointer;color:#9a8878;transition:all 0.2s
    }
    .icon-btn:hover{background:#2a221c;color:#ede0cc}

    /* ─── PHONE FRAME (mobile) ─── */
    .phone-frame{width:100%;max-width:100%;min-height:100vh}

    /* ─── FEED INNER ─── */
    .pc-content-inner{max-width:640px;margin:0 auto;padding:24px 16px}

    /* ─── WRITE POST BOX ─── */
    .write-post-box{
      background:#141210;border:1px solid #2a221c;border-radius:16px;
      padding:16px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;cursor:pointer
    }
    .write-post-box:hover{border-color:rgba(224,123,53,0.25)}
    .write-placeholder{
      background:#1a1612;border:1px solid #2a221c;border-radius:10px;
      padding:11px 14px;font-size:0.875rem;color:#3d3028;cursor:pointer;
      transition:border-color 0.2s;font-family:'DM Sans',sans-serif;width:100%
    }
    .write-placeholder:hover{border-color:rgba(224,123,53,0.3);color:#9a8878}
    .write-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
    .write-action{
      display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;
      background:#1a1612;border:1px solid #2a221c;cursor:pointer;font-size:0.78rem;
      font-weight:600;color:#9a8878;transition:all 0.2s
    }
    .write-action:hover{border-color:rgba(224,123,53,0.3);color:#ede0cc}
    .publish-btn{
      margin-left:auto;padding:7px 18px;background:#e07b35;border:none;border-radius:9px;
      color:#0c0a08;font-weight:700;font-size:0.82rem;cursor:pointer;
      font-family:'Syne',sans-serif;transition:background 0.2s,transform 0.15s
    }
    .publish-btn:hover{background:#c96a20;transform:scale(1.02)}

    /* ─── FILTER TABS ─── */
    .filter-tabs-row{display:flex;gap:8px;margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
    .filter-tabs-row::-webkit-scrollbar{display:none}
    .filter-tab{
      padding:7px 16px;border-radius:20px;font-size:0.82rem;font-weight:600;
      cursor:pointer;white-space:nowrap;border:1px solid #2a221c;color:#9a8878;
      background:transparent;transition:all 0.2s
    }
    .filter-tab:hover{border-color:rgba(224,123,53,0.3);color:#ede0cc}
    .filter-tab.active{background:#e07b35;border-color:#e07b35;color:#0c0a08}

    /* ─── POST CARDS ─── */
    .professional-card,.pc-post-card{
      background:#141210;border:1px solid #2a221c;border-radius:18px;
      overflow:hidden;margin-bottom:16px;
      transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
      position:relative;
    }
    .professional-card::before,.pc-post-card::before{
      content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
      background:linear-gradient(135deg,rgba(224,123,53,.02),transparent 60%);
      opacity:0;transition:opacity .25s;
    }
    .professional-card:hover,.pc-post-card:hover{
      border-color:rgba(224,123,53,.22);
      box-shadow:0 8px 40px rgba(0,0,0,.45),0 2px 12px rgba(224,123,53,.06);
      transform:translateY(-2px);
    }
    .professional-card:hover::before,.pc-post-card:hover::before{opacity:1;}
    .post-header{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 0;}
    .post-body{padding:12px 16px 10px;}

    /* Avatar */
    .avatar-ring{position:relative;border-radius:12px}
    .avatar-ring.online::after,.avatar-ring.offline::after{
      content:'';position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;
      border:2px solid #141210;border-radius:50%;z-index:10
    }
    .avatar-ring.online::after{background:#22c55e}
    .avatar-ring.offline::after{background:#6b7280}
    .verified-badge-small{
      position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#e07b35;
      color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:12px;font-weight:bold;border:2px solid #141210
    }

    /* Badges */
    .badge-admin{background:linear-gradient(135deg,#ef4444,#b91c1c);color:white;font-size:10px;font-weight:600;padding:2px 8px;border-radius:12px;letter-spacing:.5px;text-transform:uppercase}
    .badge-moderator{background:linear-gradient(135deg,#3b82f6,#1e40af);color:white;font-size:10px;font-weight:600;padding:2px 8px;border-radius:12px;letter-spacing:.5px;text-transform:uppercase}
    .badge-expert{background:linear-gradient(135deg,#e07b35,#b45309);color:white;font-size:10px;font-weight:600;padding:2px 8px;border-radius:12px;letter-spacing:.5px}
    .level-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(224,123,53,0.12);border:1px solid rgba(224,123,53,0.25);color:#e07b35;letter-spacing:.3px}

    /* ─── Action buttons footer ─── */
    .action-button{
      display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:10px;
      cursor:pointer;font-size:.81rem;font-weight:600;color:#9a8878;
      transition:all .18s cubic-bezier(.4,0,.2,1);
      background:transparent;border:none;font-family:'DM Sans',sans-serif;
      position:relative;overflow:hidden;
    }
    .action-button::before{
      content:'';position:absolute;inset:0;border-radius:10px;
      background:currentColor;opacity:0;transition:opacity .15s;
    }
    .action-button:hover{color:#d8ccbb;}
    .action-button:hover::before{opacity:.04;}
    .action-button:active svg{transform:scale(.88);}
    .action-button.active{color:#e07b35;}
    .action-button.active svg{fill:#e07b35;}
    .action-button svg{transition:transform .2s, fill .15s;}
    .action-button.like-btn:hover{color:#e07b35;}
    .action-button.comment-toggle-btn:hover{color:#60a5fa;}
    .action-button.share-btn:hover{color:#a78bfa;}
    .action-button.bookmark-btn:hover{color:#f59e0b;}
    .action-button.bookmark-btn.active svg{fill:#e07b35;stroke:#e07b35;}
    .action-count{
      background:rgba(224,123,53,.12);padding:2px 7px;border-radius:10px;
      font-size:.72rem;font-weight:700;color:#e07b35;margin-left:2px;
      transition:all .15s;
    }
    /* Post footer bar */
    .post-footer-bar{
      padding:8px 12px 12px;
      border-top:1px solid rgba(255,255,255,.04);
      display:flex;align-items:center;gap:2px;
    }
    .post-footer-bar .action-button:last-child{margin-left:auto;}

    /* Content typography */
    .post-content-typography{max-height:300px;overflow:hidden;position:relative;transition:max-height 0.5s ease;color:#d8ccbb;line-height:1.65;font-size:0.92rem}
    .post-content-typography.expanded{max-height:none}
    .post-content-typography.fade-bottom::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,transparent,#141210);pointer-events:none}
    .post-content-typography.expanded::after{opacity:0}
    .post-content-typography a{color:#e07b35;text-decoration:underline;text-decoration-color:rgba(224,123,53,0.3);text-underline-offset:2px;transition:all 0.2s;font-weight:500;word-break:break-word}
    .post-content-typography a:hover{color:#f39c12}
    .content-formatted p{margin-bottom:12px}
    .content-formatted h1{font-size:1.4rem;font-weight:700;color:#ede0cc;margin:18px 0 10px}
    .content-formatted h2{font-size:1.2rem;font-weight:700;color:#ede0cc;margin:16px 0 8px}
    .content-formatted h3{font-size:1.05rem;font-weight:700;color:#ede0cc;margin:14px 0 6px}
    .content-formatted pre{background:#0c0a08;border:1px solid #2a221c;border-radius:10px;padding:14px 16px;font-family:'Fira Code','Monaco',monospace;font-size:0.8rem;color:#9a8878;overflow-x:auto;margin:12px 0}
    .content-formatted code{background:#0c0a08;padding:2px 6px;border-radius:4px;font-family:'Fira Code','Monaco',monospace;font-size:0.85rem;color:#e07b35}
    .content-formatted blockquote{border-left:3px solid #e07b35;padding:10px 16px;margin:12px 0;background:rgba(224,123,53,0.05);border-radius:0 8px 8px 0;font-style:italic;color:#9a8878}
    .content-formatted ul,.content-formatted ol{margin:10px 0;padding-left:20px}
    .content-formatted li{margin-bottom:4px}

    /* Hashtags/mentions */
    .hashtag,.mention,.post-tag{color:#e07b35;font-weight:500;cursor:pointer;transition:all 0.2s}
    .hashtag:hover,.mention:hover,.post-tag:hover{color:#c96a20;text-decoration:underline}
    .tag-professional,.mention-professional{
      display:inline-flex;align-items:center;padding:4px 12px;background:rgba(255,255,255,0.03);
      border-radius:20px;font-size:12px;font-weight:500;color:#9a8878;cursor:pointer;
      transition:all 0.2s;border:1px solid rgba(255,255,255,0.05)
    }
    .tag-professional:hover{background:rgba(224,123,53,0.1);color:#e07b35;border-color:rgba(224,123,53,0.3)}
    .mention-professional:hover{background:rgba(59,130,246,0.1);color:#60a5fa;border-color:rgba(59,130,246,0.3)}

    /* Read more button */
    .read-more-btn{
      display:inline-flex;align-items:center;padding:6px 14px;
      background:rgba(224,123,53,0.1);border:1px solid rgba(224,123,53,0.2);
      border-radius:20px;color:#e07b35;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s
    }
    .read-more-btn:hover{background:rgba(224,123,53,0.15);transform:translateY(-1px)}

    /* ─── Stats bar ─── */
    .post-stats-bar{
      display:flex;align-items:center;justify-content:space-between;
      padding:8px 16px;
      border-top:1px solid rgba(255,255,255,.03);
      border-bottom:1px solid rgba(255,255,255,.03);
    }
    .stat-item{
      display:flex;align-items:center;gap:5px;
      font-size:.74rem;cursor:default;
    }
    .metric-value{font-weight:600;color:#b8ad9e;}
    .metric-label{color:#3d3028;font-size:.7rem;}
    .stat-item.clickable{cursor:pointer;transition:color .15s;}
    .stat-item.clickable:hover .metric-value{color:#e07b35;}

    /* Media: project card */
    .project-card{
      background:linear-gradient(145deg,#1a1612,#141210);border:1px solid rgba(224,123,53,0.15);
      border-radius:14px;padding:16px;margin-top:12px;shadow:soft
    }
    .project-card:hover{border-color:rgba(224,123,53,0.3)}

    /* Media: image gallery */
    .post-container{width:100%;max-width:600px;margin:0 auto;border-radius:12px;overflow:hidden}
    .post-gallery{display:flex;overflow-x:auto;gap:4px;scroll-snap-type:x mandatory;padding:4px;scrollbar-width:none}
    .post-gallery::-webkit-scrollbar{display:none}
    .post-gallery-item{flex:0 0 auto;width:100%;max-width:200px;height:200px;position:relative;scroll-snap-align:start;border-radius:10px;overflow:hidden;cursor:pointer}
    .post-image{width:100%;height:100%;object-fit:cover;border-radius:10px;transition:transform 0.3s}
    .post-gallery-item:hover .post-image{transform:scale(1.04)}
    .image-count-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);color:#fff;font-size:28px;font-weight:bold;display:flex;align-items:center;justify-content:center;border-radius:10px}

    /* Media: reel card */
    .reel-card{min-width:120px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;border:1px solid #2a221c;transition:border-color 0.2s}
    .reel-card:hover{border-color:rgba(224,123,53,0.3)}
    .reel-card img,.reel-card video{width:100%;height:180px;object-fit:cover}
    .reel-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.75));padding:10px;color:white;font-size:0.75rem}

    /* Media: video */
    .custom-video-container{position:relative;background:#000;border-radius:12px;overflow:hidden}
    .custom-video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.85));padding:1rem;opacity:0;transition:opacity 0.3s ease}
    .custom-video-container:hover .custom-video-controls{opacity:1}
    .progress-bar{width:100%;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin-bottom:.5rem;cursor:pointer}
    .progress-filled{height:100%;background:#e07b35;border-radius:2px;width:0%;transition:width 0.1s linear}

    /* Media: audio */
    .audio-player{display:flex;align-items:center;gap:12px;padding:14px;background:#1a1612;border:1px solid #2a221c;border-radius:14px;margin-top:12px}
    .audio-info{flex:1}
    .audio-progress{flex:1;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;overflow:hidden}
    .audio-progress-bar{height:100%;background:#e07b35;width:30%}

    /* Link preview card */
    .link-preview-card{
      display:flex;gap:14px;padding:14px;background:rgba(255,255,255,0.02);
      border:1px solid rgba(255,255,255,0.05);border-radius:12px;cursor:pointer;transition:all 0.3s;margin-top:12px
    }
    .link-preview-card:hover{border-color:rgba(224,123,53,0.3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
    .preview-domain{font-size:11px;color:#e07b35;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:5px}
    .preview-title{font-size:14px;font-weight:600;color:#ede0cc;margin-bottom:5px;line-height:1.4}
    .preview-description{font-size:12px;color:#9a8878;line-height:1.4}
    .preview-image-wrapper{flex-shrink:0;width:90px;height:90px;border-radius:8px;overflow:hidden}
    .preview-image{width:100%;height:100%;object-fit:cover}

    /* Tags container */
    .tags-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

    /* Badge pinned/announcement */
    .badge-announcement{display:inline-flex;align-items:center;padding:4px 12px;background:rgba(224,123,53,0.1);border:1px solid rgba(224,123,53,0.2);border-radius:20px;color:#e07b35;font-size:11px;font-weight:600}
    .badge-important{display:inline-flex;align-items:center;padding:4px 12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);border-radius:20px;color:#ef4444;font-size:11px;font-weight:600}
    .badge-pinned{display:inline-flex;align-items:center;padding:4px 12px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);border-radius:20px;color:#60a5fa;font-size:11px;font-weight:600}

    /* ─── COMMENTS — Design pro IT ─── */
    @keyframes slideReply{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
    @keyframes commentAppear{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
    @keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
    @keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}

    .comments-section{
      max-height:0;overflow:hidden;
      transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
      opacity:0;
    }
    .comments-section.expanded{max-height:2000px;overflow:visible;opacity:1;}

    /* Comments list scrollable zone */
    .comments-list-inner{
      max-height:420px;overflow-y:auto;padding:0 16px;
      scrollbar-width:thin;scrollbar-color:#3d3028 transparent;
    }
    .comments-list-inner::-webkit-scrollbar{width:3px}
    .comments-list-inner::-webkit-scrollbar-thumb{background:#3d3028;border-radius:3px}

    /* Comment thread */
    .comment-thread{
      padding:12px 0;
      border-bottom:1px solid rgba(255,255,255,.04);
      animation:commentAppear .22s ease both;
    }
    .comment-thread:last-child{border-bottom:none}

    /* Comment item */
    .comment-item{display:flex;gap:10px;position:relative;}
    .comment-avatar{
      width:30px;height:30px;border-radius:8px;object-fit:cover;
      flex-shrink:0;border:1.5px solid rgba(255,255,255,.06);
    }
    .comment-body{flex:1;min-width:0;}
    .comment-bubble{
      background:#1a1612;border:1px solid rgba(255,255,255,.06);
      border-radius:0 12px 12px 12px;padding:9px 13px;
      display:inline-block;max-width:100%;
      transition:border-color .15s;
    }
    .comment-bubble:hover{border-color:rgba(255,255,255,.1);}
    .comment-author-line{
      display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px;
    }
    .comment-author-name{
      font-weight:700;font-size:.8rem;color:#ede0cc;
      cursor:pointer;transition:color .15s;
    }
    .comment-author-name:hover{color:#e07b35;}
    .comment-author-tag{
      font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:10px;
      text-transform:uppercase;letter-spacing:.5px;
    }
    .author-tag{background:linear-gradient(45deg,#e07b35,#c96a20);color:white;font-size:.62rem;padding:2px 7px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
    .comment-time{font-size:.7rem;color:#3d3028;white-space:nowrap;}
    .comment-text{
      font-size:.84rem;color:#b8ad9e;line-height:1.55;
      word-break:break-word;white-space:pre-wrap;
    }

    /* Comment actions */
    .comment-actions{
      display:flex;align-items:center;gap:2px;margin-top:5px;margin-left:2px;
    }
    .comment-action-btn{
      display:inline-flex;align-items:center;gap:4px;
      padding:4px 8px;border-radius:7px;border:none;
      background:transparent;cursor:pointer;
      font-size:.73rem;font-weight:600;color:#3d3028;
      font-family:'DM Sans',sans-serif;
      transition:all .15s;
    }
    .comment-action-btn:hover{background:rgba(255,255,255,.05);color:#9a8878;}
    .comment-action-btn.liked{color:#e07b35;}
    .comment-action-btn.liked svg{fill:#e07b35;}
    .comment-action-btn.reply-btn:hover{color:#60a5fa;}
    .comment-action-btn.delete-btn:hover{color:#ef4444;background:rgba(239,68,68,.06);}

    /* Replies indent */
    .comment-replies{
      margin-left:38px;margin-top:8px;padding-left:12px;
      border-left:1.5px solid rgba(224,123,53,.2);
    }
    .comment-replies:hover{border-left-color:rgba(224,123,53,.4);}
    .reply-thread{
      animation:slideReply .22s ease-out both;
      padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03);
    }
    .reply-thread:last-child{border-bottom:none;}

    /* Reply bubble — slightly different */
    .reply-thread .comment-bubble{
      background:#161310;
      border-radius:0 10px 10px 10px;
    }

    /* Toggle replies btn */
    .toggle-replies-btn{
      display:inline-flex;align-items:center;gap:5px;
      margin:6px 0 0 38px;padding:4px 12px;
      background:rgba(224,123,53,.07);border:1px solid rgba(224,123,53,.15);
      border-radius:20px;color:#e07b35;font-size:.75rem;font-weight:600;
      cursor:pointer;font-family:'DM Sans',sans-serif;
      transition:all .18s;
    }
    .toggle-replies-btn:hover{background:rgba(224,123,53,.14);border-color:rgba(224,123,53,.3);}

    /* Reply form */
    .reply-form{
      display:none;margin-top:8px;margin-left:38px;
      animation:slideReply .18s ease both;
    }
    .reply-form.show{display:block;}
    .reply-input-wrap{
      display:flex;align-items:center;gap:8px;
      background:#161310;border:1.5px solid rgba(255,255,255,.07);
      border-radius:10px;padding:7px 10px;
      transition:border-color .15s;
    }
    .reply-input-wrap:focus-within{border-color:rgba(224,123,53,.4);}

    /* Comment form (main) */
    .comment-form-wrap{
      padding:12px 16px 16px;
      border-top:1px solid rgba(255,255,255,.04);
    }
    .comment-input-row{
      display:flex;align-items:flex-end;gap:9px;
    }
    .comment-input-box{
      flex:1;background:#1a1612;border:1.5px solid rgba(255,255,255,.07);
      border-radius:12px;padding:9px 13px;
      display:flex;align-items:center;gap:8px;
      transition:border-color .15s, box-shadow .15s;
    }
    .comment-input-box:focus-within{
      border-color:rgba(224,123,53,.4);
      box-shadow:0 0 0 3px rgba(224,123,53,.06);
    }
    .comment-input-field{
      flex:1;background:transparent;border:none;outline:none;
      font-size:.86rem;color:#ede0cc;
      font-family:'DM Sans',sans-serif;
      resize:none;max-height:80px;line-height:1.45;
    }
    .comment-input-field::placeholder{color:#3d3028;}
    .comment-send-btn{
      width:36px;height:36px;border-radius:10px;border:none;
      background:#e07b35;color:#0c0a08;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;transition:all .18s;
    }
    .comment-send-btn:hover{background:#c96a20;transform:scale(1.06);}
    .comment-send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}

    /* First-comment empty state */
    .comments-empty{
      text-align:center;padding:24px 16px;color:#3d3028;
    }
    .comments-empty svg{margin:0 auto 10px;display:block;opacity:.4;}
    .comments-empty p{font-size:.84rem;}

    /* Like count pill */
    .like-count-pill{
      font-size:.7rem;font-weight:700;color:#e07b35;
      background:rgba(224,123,53,.1);padding:1px 5px;border-radius:8px;
    }

    /* Post menu */
    .post-menu{position:absolute;top:40px;right:10px;background:#2d2019;border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:8px;min-width:200px;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,0.5);display:none}
    .post-menu.show{display:block;animation:fadeIn .2s ease-out}
    .post-menu-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .2s;color:#ede0cc;font-size:0.875rem}
    .post-menu-item:hover{background:rgba(255,255,255,0.06)}
    .post-menu-item svg{width:16px;height:16px}

    /* Share modal */
    .custom-share-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:2000;display:none;align-items:center;justify-content:center}
    .custom-share-content{background:#1a1612;border:1px solid #2a221c;border-radius:18px;width:90%;max-width:440px;max-height:85vh;overflow-y:auto}
    .share-header{padding:16px 20px;border-bottom:1px solid #2a221c;display:flex;justify-content:space-between;align-items:center}
    .share-body{padding:20px}
    .share-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .share-method{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:10px;cursor:pointer;transition:background .2s;color:#9a8878}
    .share-method:hover{background:rgba(255,255,255,0.05)}
    .share-method svg{width:32px;height:32px}

    /* Image modal */
    .modal{display:flex;justify-content:center;align-items:center;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.95)}
    .modal.hidden{display:none}
    .modal-content{position:relative;max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center}
    .modal-content img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:8px}
    .close{position:absolute;top:16px;right:20px;color:white;font-size:2rem;cursor:pointer;background:rgba(0,0,0,0.5);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;z-index:1001}
    .prev,.next{background:rgba(0,0,0,0.5);color:white;border:none;padding:12px 16px;cursor:pointer;font-size:1.2rem;border-radius:8px;position:absolute;top:50%;transform:translateY(-50%);z-index:1001}
    .prev{left:16px}.next{right:16px}

    /* Search overlay */
    .search-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(12,10,8,0.97);z-index:500;overflow-y:auto}
    .search-container-full{padding:20px;max-width:680px;margin:0 auto}
    .search-header{padding:16px 0;margin-bottom:12px;position:relative}
    .close-search{position:absolute;right:0;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.08);border:1px solid #2a221c;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ede0cc;font-size:1.2rem}
    .search-input-wrapper{display:flex;align-items:center;background:#1a1612;border:1px solid #2a221c;border-radius:12px;padding:10px 16px;margin-top:8px;transition:all 0.3s}
    .search-input-wrapper:focus-within{border-color:#e07b35;box-shadow:0 0 0 3px rgba(224,123,53,0.1)}
    .search-input-full{flex:1;border:none;background:transparent;font-size:16px;padding:8px 0;outline:none;color:#ede0cc;font-family:'DM Sans',sans-serif;caret-color:#e07b35}
    .search-input-full::placeholder{color:#3d3028}
    .search-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
    .filter-chip{background:rgba(255,255,255,0.05);border-radius:20px;padding:8px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .3s;border:1px solid transparent;color:rgba(255,255,255,0.8);font-size:14px}
    .filter-chip.active{background:#e07b35;color:#0c0a08;border-color:#e07b35;box-shadow:0 4px 12px rgba(224,123,53,0.3)}
    .filter-chip:hover{background:rgba(255,255,255,0.1)}
    .search-stats{padding:10px 0;margin-bottom:16px;font-size:13px;color:#9a8878;border-bottom:1px solid #2a221c}
    .search-results-container{display:flex;flex-direction:column;gap:14px;padding-bottom:20px}
    .search-result-card{background:rgba(255,255,255,0.03);border-radius:14px;padding:18px;cursor:pointer;transition:all .3s;border:1px solid rgba(255,255,255,0.05)}
    .search-result-card:hover{background:rgba(255,255,255,0.05);border-color:rgba(224,123,53,0.3);transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,0.3)}
    .search-result-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
    .search-result-type{margin-left:auto;background:rgba(224,123,53,0.2);color:#e07b35;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;border:1px solid rgba(224,123,53,0.3)}
    .search-result-content{color:rgba(255,255,255,0.9);line-height:1.6;margin-bottom:12px}
    .search-highlight{background:rgba(224,123,53,0.2);color:#e07b35;padding:2px 4px;border-radius:4px;font-weight:600}
    .search-result-meta{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.45);font-size:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
    .search-result-meta svg{width:14px;height:14px;stroke:#e07b35}
    .no-results{padding:50px 20px;text-align:center}
    .no-results.hidden{display:none}
    .loading-search{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:50}
    .loading-search.hidden{display:none}
    .search-spinner{width:40px;height:40px;border:3px solid rgba(224,123,53,0.1);border-top-color:#e07b35;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Loading overlay */
    .loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(12,10,8,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(6px)}
    .loading-spinner-api{border:2px solid #3d3028;border-top:2px solid #e07b35;border-radius:50%;width:48px;height:48px;animation:spin 1s linear infinite}
    .loading-text{color:#ede0cc;margin-top:18px;font-size:16px}
    .error-message{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#ef4444;padding:14px;border-radius:10px;margin:12px;text-align:center;display:none}
    .retry-button{background:#e07b35;color:white;border:none;padding:8px 18px;border-radius:7px;cursor:pointer;margin-top:8px;font-family:'DM Sans',sans-serif;font-weight:600}

    /* ─── SKELETON FEED ─── */
    .skeleton-feed { display: flex; flex-direction: column; gap: 16px; }
    .skeleton-card { background: #141210; border: 1px solid #2a221c; border-radius: 18px; padding: 18px 18px 14px; }
    .sk { background: linear-gradient(90deg, #1a1612 25%, #231913 50%, #1a1612 75%); background-size: 200% 100%; animation: skShimmer 1.6s ease-in-out infinite; border-radius: 6px; }
    @keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .sk-avatar { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
    .sk-line { height: 11px; margin-bottom: 8px; }
    .sk-line.w25 { width: 25%; } .sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w75 { width: 75%; } .sk-line.w90 { width: 90%; }
    .sk-block { border-radius: 12px; margin-top: 10px; }
    .sk-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
    .sk-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #1e1a15; }
    .sk-btn { height: 26px; border-radius: 8px; flex: 1; }

    /* Infinite loader */
    .infinite-loader { padding: 20px; text-align: center; display: none; }
    .infinite-loader.show { display: flex; align-items: center; justify-content: center; gap: 10px; color: #9a8878; font-size: .82rem; }
    .infinite-dots { display: flex; gap: 5px; }
    .infinite-dots span { width: 7px; height: 7px; border-radius: 50%; background: #3d3028; animation: dotPulse 1.4s ease-in-out infinite; }
    .infinite-dots span:nth-child(2) { animation-delay: .2s; }
    .infinite-dots span:nth-child(3) { animation-delay: .4s; }
    @keyframes dotPulse { 0%, 80%, 100% { background: #3d3028; transform: scale(1); } 40% { background: #e07b35; transform: scale(1.3); } }

    /* Theme toggles */
    .theme-option.active{background:rgba(224,123,53,0.1);border-left:3px solid #e07b35}
    .toggle-switch{width:38px;height:20px;background:rgba(255,255,255,0.1);border-radius:10px;position:relative;cursor:pointer}
    .toggle-switch.active{background:#e07b35}
    .toggle-circle{position:absolute;top:2px;left:2px;width:16px;height:16px;background:white;border-radius:50%;transition:transform .2s}
    .toggle-switch.active .toggle-circle{transform:translateX(18px)}

    /* Mobile nav bottom */
    @media (max-width:767px){
      .sidebar{display:none!important}
      .pc-header{display:none!important}
      .mobile-nav{display:block}
      .content{padding-bottom:78px}
      .phone-frame{width:100%;max-width:100%;min-height:100vh}
    }
    @media (min-width:768px){
      .phone-frame{display:none!important}
      .sidebar{display:flex!important}
      .mobile-nav{display:none!important}
    }

    /* Mobile bottom nav */
    .mobile-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(20,18,16,0.97);backdrop-filter:blur(20px);border-top:1px solid #2a221c;padding:10px 0 18px;z-index:100}
    .mobile-nav-items{display:flex;justify-content:space-around;align-items:center}
    .mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:#3d3028;cursor:pointer;padding:4px 12px;border-radius:10px;transition:all .2s}
    .mobile-nav-item.active{color:#e07b35}
    .mobile-nav-item span{font-size:10px;font-weight:600}
    .mobile-post-btn{width:48px;height:48px;background:#e07b35;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#0c0a08;box-shadow:0 4px 16px rgba(224,123,53,0.4);transition:transform .2s,box-shadow .2s}
    .mobile-post-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(224,123,53,0.5)}

    /* Heart animation */
    @keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(1)}75%{transform:scale(1.15)}100%{transform:scale(1)}}
    .heart-animation{animation:heartBeat .5s ease-in-out}

    /* Divider */
    .divider-professional{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}

    /* Feed animation */
    @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    .animate-slide-up{animation:fadeUp .35s ease both}

    /* Separator dot */
    .separator-dot{color:#3d3028}
    .username-professional{color:rgba(255,255,255,0.5)}

    /* Scroll bar styles */
    .scrollbar-thin::-webkit-scrollbar{width:4px}
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}

    /* Modal image nav */
    @media(max-width:767px){
      .prev,.next{padding:8px 12px;font-size:1rem}
      .search-container-full{padding:14px}
    }
    @media(min-width:1100px){
      .pc-content-inner{padding:28px 24px}
    }
    /* ─── ROOT TOKENS (maquette palette) ─── */
    :root {
      --crust:    #0e0b09;
      --surface:  #141110;
      --card:     #1c1814;
      --card2:    #221e19;
      --border:   #2e2520;
      --border2:  #3a302a;
      --ember:    #e07b35;
      --ember2:   #c96a20;
      --ember-glow: rgba(224,123,53,.13);
      --sand:     #ede0cc;
      --sand2:    #c8b8a2;
      --muted:    #7a6a58;
      --muted2:   #4a3c30;
    }

    /* ─── BASE ─── */
    html, body {
      background: var(--crust) !important;
      color: var(--sand) !important;
      font-family: 'DM Sans', sans-serif !important;
    }

    /* ─── SIDEBAR ─── */
    .sidebar {
      background: var(--surface) !important;
      border-right: 1px solid var(--border) !important;
      width: 240px !important; min-width: 240px !important;
    }
    .sidebar-logo {
      font-family: 'Syne', sans-serif !important;
      font-size: 1.65rem !important; font-weight: 800 !important;
      color: var(--sand) !important; letter-spacing: -1.5px !important;
    }
    .sidebar-logo span { color: var(--ember) !important; }

    .sidebar-item {
      border-radius: 10px !important;
      color: var(--muted) !important;
      font-family: 'DM Sans', sans-serif !important;
      font-size: .875rem !important; font-weight: 500 !important;
    }
    .sidebar-item:hover { background: rgba(224,123,53,.09) !important; color: var(--sand) !important; }
    .sidebar-item.active {
      background: rgba(224,123,53,.14) !important;
      color: var(--ember) !important;
    }
    .sidebar-item.active::before { background: var(--ember) !important; }

    .nav-section-label {
      color: var(--muted2) !important;
      font-size: 10px !important; letter-spacing: 2px !important;
    }

    .notification-badge {
      background: var(--ember) !important;
      color: var(--crust) !important;
    }

    .sidebar-user-card {
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 12px !important;
    }
    .sidebar-user-card:hover { border-color: rgba(224,123,53,.3) !important; }

    /* ─── PC HEADER ─── */
    .pc-header {
      background: rgba(14,11,9,.92) !important;
      border-bottom: 1px solid var(--border) !important;
      backdrop-filter: blur(20px) !important;
    }
    .pc-header-title {
      font-family: 'Syne', sans-serif !important;
      font-weight: 700 !important; color: var(--sand) !important;
    }
    .pc-search-bar {
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 10px !important;
    }
    .pc-search-bar:focus-within {
      border-color: rgba(224,123,53,.5) !important;
      box-shadow: 0 0 0 3px rgba(224,123,53,.07) !important;
    }
    .pc-search-bar input { color: var(--sand) !important; }
    .pc-search-bar input::placeholder { color: var(--muted2) !important; }
    .icon-btn {
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      color: var(--muted) !important; border-radius: 10px !important;
    }
    .icon-btn:hover { background: var(--border) !important; color: var(--sand) !important; }

    /* ─── WRITE POST BOX ─── */
    .write-post-box {
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 16px !important;
    }
    .write-post-box:hover { border-color: rgba(224,123,53,.28) !important; }
    .write-placeholder {
      background: var(--card2) !important;
      border: 1px solid var(--border) !important;
      color: var(--muted2) !important; border-radius: 10px !important;
    }
    .write-placeholder:hover { border-color: rgba(224,123,53,.3) !important; color: var(--muted) !important; }
    .write-action {
      background: var(--card2) !important;
      border: 1px solid var(--border) !important;
      color: var(--muted) !important; border-radius: 8px !important;
    }
    .write-action:hover { border-color: rgba(224,123,53,.3) !important; color: var(--sand) !important; }
    .publish-btn {
      background: var(--ember) !important; color: var(--crust) !important;
      font-family: 'Syne', sans-serif !important; font-weight: 700 !important;
      border-radius: 10px !important;
    }
    .publish-btn:hover { background: var(--ember2) !important; }

    /* ─── FILTER TABS ─── */
    .filter-tab {
      border: 1px solid var(--border) !important;
      color: var(--muted) !important;
      background: transparent !important; border-radius: 20px !important;
      font-family: 'DM Sans', sans-serif !important;
    }
    .filter-tab:hover { border-color: rgba(224,123,53,.3) !important; color: var(--sand) !important; }
    .filter-tab.active {
      background: var(--ember) !important;
      border-color: var(--ember) !important; color: var(--crust) !important;
    }

    /* ─── POST CARDS ─── */
    .professional-card, .pc-post-card {
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 18px !important;
    }
    .professional-card:hover, .pc-post-card:hover {
      border-color: rgba(224,123,53,.24) !important;
      box-shadow: 0 10px 44px rgba(0,0,0,.5), 0 2px 14px rgba(224,123,53,.07) !important;
      transform: translateY(-2px) !important;
    }
    .professional-card::before, .pc-post-card::before {
      background: linear-gradient(135deg, rgba(224,123,53,.03), transparent 60%) !important;
    }

    /* Post content */
    .post-content-typography { color: var(--sand2) !important; }
    .post-content-typography.fade-bottom::after {
      background: linear-gradient(to bottom, transparent, var(--card)) !important;
    }
    .post-content-typography a { color: var(--ember) !important; }
    .content-formatted pre {
      background: var(--crust) !important;
      border: 1px solid var(--border) !important;
      color: var(--muted) !important;
    }
    .content-formatted code { background: var(--crust) !important; color: var(--ember) !important; }
    .content-formatted blockquote {
      border-left: 3px solid var(--ember) !important;
      background: rgba(224,123,53,.05) !important;
    }

    /* Action buttons */
    .action-button { color: var(--muted) !important; font-family: 'DM Sans', sans-serif !important; }
    .action-button:hover { color: var(--sand2) !important; }
    .action-button.active { color: var(--ember) !important; }
    .action-button.active svg { fill: var(--ember) !important; }
    .action-count {
      background: rgba(224,123,53,.12) !important;
      color: var(--ember) !important;
    }
    .post-footer-bar { border-top: 1px solid rgba(255,255,255,.04) !important; }
    .post-stats-bar {
      border-top: 1px solid rgba(255,255,255,.03) !important;
      border-bottom: 1px solid rgba(255,255,255,.03) !important;
    }
    .metric-value { color: var(--sand2) !important; }
    .metric-label { color: var(--muted2) !important; }

    /* Tags */
    .hashtag, .mention, .post-tag { color: var(--ember) !important; }
    .hashtag:hover, .mention:hover { color: var(--ember2) !important; }
    .read-more-btn {
      background: rgba(224,123,53,.1) !important;
      border: 1px solid rgba(224,123,53,.2) !important;
      color: var(--ember) !important;
    }

    /* Verified badge */
    .verified-badge-small { background: var(--ember) !important; border: 2px solid var(--card) !important; }

    /* Level badge */
    .level-badge {
      background: rgba(224,123,53,.12) !important;
      border: 1px solid rgba(224,123,53,.25) !important;
      color: var(--ember) !important;
    }

    /* Post menu */
    .post-menu { background: var(--card2) !important; border: 1px solid var(--border2) !important; border-radius: 12px !important; }
    .post-menu-item { color: var(--sand) !important; }
    .post-menu-item:hover { background: rgba(255,255,255,.06) !important; }

    /* Comments */
    .comment-bubble { background: var(--card2) !important; border-radius: 12px !important; }
    .reply-thread .comment-bubble { background: #1a1612 !important; }
    .comment-replies { border-left: 1.5px solid rgba(224,123,53,.2) !important; }
    .toggle-replies-btn {
      background: rgba(224,123,53,.07) !important;
      border: 1px solid rgba(224,123,53,.15) !important;
      color: var(--ember) !important;
    }
    .toggle-replies-btn:hover { background: rgba(224,123,53,.14) !important; border-color: rgba(224,123,53,.3) !important; }
    .comment-form-wrap { border-top: 1px solid rgba(255,255,255,.04) !important; }
    .comment-input-box {
      background: var(--card2) !important;
      border: 1.5px solid rgba(255,255,255,.07) !important;
      border-radius: 12px !important;
    }
    .comment-input-box:focus-within {
      border-color: rgba(224,123,53,.4) !important;
      box-shadow: 0 0 0 3px rgba(224,123,53,.06) !important;
    }
    .comment-input-field { color: var(--sand) !important; }
    .comment-input-field::placeholder { color: var(--muted2) !important; }
    .comment-send-btn { background: var(--ember) !important; color: var(--crust) !important; }
    .comment-send-btn:hover { background: var(--ember2) !important; }
    .comment-action-btn { color: var(--muted) !important; }
    .comment-action-btn:hover { color: var(--ember) !important; background: rgba(224,123,53,.06) !important; }
    .comment-action-btn.delete-btn:hover { color: #ef4444 !important; background: rgba(239,68,68,.06) !important; }

    /* Share modal */
    .custom-share-content {
      background: var(--card2) !important;
      border: 1px solid var(--border) !important;
      border-radius: 18px !important;
    }
    .share-header { border-bottom: 1px solid var(--border) !important; }
    .share-method { color: var(--muted) !important; }
    .share-method:hover { background: rgba(255,255,255,.05) !important; }

    /* Search overlay */
    .search-overlay { background: rgba(14,11,9,.97) !important; }
    .search-input-wrapper {
      background: var(--card2) !important;
      border: 1px solid var(--border) !important; border-radius: 12px !important;
    }
    .search-input-wrapper:focus-within { border-color: var(--ember) !important; box-shadow: 0 0 0 3px rgba(224,123,53,.1) !important; }
    .search-input-full { color: var(--sand) !important; caret-color: var(--ember) !important; }
    .filter-chip { background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.8) !important; }
    .filter-chip.active { background: var(--ember) !important; color: var(--crust) !important; border-color: var(--ember) !important; }
    .search-result-card {
      background: rgba(255,255,255,.03) !important;
      border: 1px solid rgba(255,255,255,.05) !important;
      border-radius: 14px !important;
    }
    .search-result-card:hover {
      background: rgba(255,255,255,.05) !important;
      border-color: rgba(224,123,53,.3) !important;
    }
    .search-result-type { background: rgba(224,123,53,.2) !important; color: var(--ember) !important; }
    .search-highlight { background: rgba(224,123,53,.2) !important; color: var(--ember) !important; }

    /* Mobile bottom nav */
    .mobile-nav {
      background: rgba(20,17,14,.97) !important;
      border-top: 1px solid var(--border) !important;
    }
    .mobile-nav-item { color: var(--muted2) !important; }
    .mobile-nav-item.active { color: var(--ember) !important; }
    .mobile-post-btn {
      background: var(--ember) !important;
      color: var(--crust) !important;
      box-shadow: 0 4px 16px rgba(224,123,53,.4) !important;
    }

    /* Loader / error */
    .loading-overlay { background: rgba(14,11,9,.92) !important; }
    .loading-spinner-api { border: 2px solid var(--muted2) !important; border-top: 2px solid var(--ember) !important; }
    .loading-text { color: var(--sand) !important; }
    .retry-button { background: var(--ember) !important; color: white !important; }

    /* Image gallery overlay */
    .media-grid img, .media-single img { border-radius: 12px !important; }
    .modal { background-color: rgba(0,0,0,.95) !important; }

    /* Divider */
    .divider-professional { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent) !important; }

    /* Scrollbar */
    ::-webkit-scrollbar-thumb { background: var(--border2) !important; }
    ::-webkit-scrollbar-thumb:hover { background: var(--ember) !important; }

    /* Badge colors */
    .badge-expert { background: linear-gradient(135deg, var(--ember), var(--ember2)) !important; color: white !important; }
    .badge-admin { background: linear-gradient(135deg,#ef4444,#b91c1c) !important; }
    .badge-moderator { background: linear-gradient(135deg,#3b82f6,#1e40af) !important; }

    /* ─── MEDIA GRID IMAGES ─── */
    .media-grid, .media-single { border-radius: 14px !important; overflow: hidden !important; }

    /* ─── NOTIFICATION DOT ─── */
    .notification-badge { background: var(--ember) !important; color: var(--crust) !important; }

    /* ─── OVERALL GLOW ACCENT ─── */
    ::selection { background: rgba(224,123,53,.25) !important; color: var(--sand) !important; }
    /* ─── MODE RECRUTEUR ─── */
    body.mode-rec .sidebar-item.active{background:rgba(91,156,246,.14)!important;color:#5b9cf6!important;}
    body.mode-rec .sidebar-item.active::before{background:#5b9cf6!important;}
    body.mode-rec .sidebar-item:hover{background:rgba(91,156,246,.08)!important;}
    body.mode-rec .filter-tab.active{background:#5b9cf6!important;border-color:#5b9cf6!important;}
    body.mode-rec .mobile-post-btn{background:#5b9cf6!important;box-shadow:0 4px 16px rgba(91,156,246,.4)!important;}
    body.mode-rec .publish-btn{background:#5b9cf6!important;}
    body.mode-rec .publish-btn:hover{background:#3a7de0!important;}
    body.mode-rec .notification-badge{background:#5b9cf6!important;}
    body.mode-rec .action-button.active{color:#5b9cf6!important;}
    body.mode-rec .action-button.active svg{fill:#5b9cf6!important;}
    body.mode-rec .action-count{background:rgba(91,156,246,.12)!important;color:#5b9cf6!important;}
    body.mode-rec .level-badge{background:rgba(91,156,246,.12)!important;border-color:rgba(91,156,246,.25)!important;color:#5b9cf6!important;}
    body.mode-rec .write-post-box:hover{border-color:rgba(91,156,246,.28)!important;}
    body.mode-rec .action-button.like-btn:hover{color:#5b9cf6!important;}
    body.mode-rec .mobile-nav-item.active{color:#5b9cf6!important;}
    body.mode-rec .comment-send-btn{background:#5b9cf6!important;}
    body.mode-rec .sidebar-logo span{color:#5b9cf6!important;}

    /* ─── MODE ENTREPRISE ─── */
    body.mode-company .sidebar-item.active{background:rgba(76,175,125,.14)!important;color:#4caf7d!important;}
    body.mode-company .sidebar-item.active::before{background:#4caf7d!important;}
    body.mode-company .sidebar-item:hover{background:rgba(76,175,125,.08)!important;}
    body.mode-company .filter-tab.active{background:#4caf7d!important;border-color:#4caf7d!important;}
    body.mode-company .mobile-post-btn{background:#4caf7d!important;box-shadow:0 4px 16px rgba(76,175,125,.4)!important;}
    body.mode-company .publish-btn{background:#4caf7d!important;}
    body.mode-company .publish-btn:hover{background:#3a9e68!important;}
    body.mode-company .notification-badge{background:#4caf7d!important;}
    body.mode-company .action-button.active{color:#4caf7d!important;}
    body.mode-company .action-button.active svg{fill:#4caf7d!important;}
    body.mode-company .action-count{background:rgba(76,175,125,.12)!important;color:#4caf7d!important;}
    body.mode-company .level-badge{background:rgba(76,175,125,.12)!important;border-color:rgba(76,175,125,.25)!important;color:#4caf7d!important;}
    body.mode-company .action-button.like-btn:hover{color:#4caf7d!important;}
    body.mode-company .mobile-nav-item.active{color:#4caf7d!important;}
    body.mode-company .comment-send-btn{background:#4caf7d!important;}
    body.mode-company .sidebar-logo span{color:#4caf7d!important;}

    /* ─── SKELETON FEED ─── */
    .skeleton-feed { display: flex; flex-direction: column; gap: 16px; }
    .skeleton-card { background: #141210; border: 1px solid #2a221c; border-radius: 18px; padding: 18px 18px 14px; }
    .sk { background: linear-gradient(90deg, #1a1612 25%, #231913 50%, #1a1612 75%); background-size: 200% 100%; animation: skShimmer 1.6s ease-in-out infinite; border-radius: 6px; }
    @keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .sk-avatar { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
    .sk-line { height: 11px; margin-bottom: 8px; }
    .sk-line.w25 { width: 25%; } .sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w75 { width: 75%; } .sk-line.w90 { width: 90%; }
    .sk-block { border-radius: 12px; margin-top: 10px; }
    .sk-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
    .sk-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #1e1a15; }
    .sk-btn { height: 26px; border-radius: 8px; flex: 1; }
    .hk-sk-post { opacity: 0; animation: skShimmer 1.6s ease-in-out infinite, skFadeIn .4s ease forwards; }
    @keyframes skFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .infinite-dots { display: flex; gap: 5px; }
    .infinite-dots span { width: 7px; height: 7px; border-radius: 50%; background: #3d3028; animation: dotPulse 1.4s ease-in-out infinite; }
    .infinite-dots span:nth-child(2) { animation-delay: .2s; }
    .infinite-dots span:nth-child(3) { animation-delay: .4s; }
    @keyframes dotPulse { 0%, 80%, 100% { background: #3d3028; transform: scale(1); } 40% { background: #e07b35; transform: scale(1.3); } }

    /* ─── CODE BLOCKS ─── */
    .code-block-wrap { margin: 12px 0; border-radius: 12px; overflow: hidden; border: 1px solid #2a221c; background: #0c0a08; }
    .code-block-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #141210; border-bottom: 1px solid #2a221c; }
    .code-lang-badge { font-size: .72rem; font-weight: 700; color: #e07b35; text-transform: uppercase; letter-spacing: .8px; font-family: 'DM Sans', sans-serif; }
    .code-copy-btn, .code-expand-btn { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; color: #9a8878; font-size: .72rem; font-weight: 600; padding: 3px 8px; cursor: pointer; transition: all .2s; font-family: 'DM Sans', sans-serif; }
    .code-copy-btn:hover { background: rgba(224,123,53,.12); border-color: rgba(224,123,53,.3); color: #e07b35; }
    .code-expand-btn:hover { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); color: #60a5fa; }
    .code-copy-btn.copied { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80; }
    .code-pre { margin: 0; padding: 16px; overflow-x: auto; font-family: 'Fira Code','Monaco','Cascadia Code',monospace; font-size: .8rem; line-height: 1.65; max-height: 320px; overflow-y: auto; }
    .code-pre::-webkit-scrollbar { width: 4px; height: 4px; } .code-pre::-webkit-scrollbar-thumb { background: #3d3028; border-radius: 4px; }
    .inline-code { background: rgba(224,123,53,.1); border: 1px solid rgba(224,123,53,.2); color: #e07b35; padding: 2px 6px; border-radius: 4px; font-family: 'Fira Code',monospace; font-size: .83em; }

    /* ─── CODE MODAL ─── */
    #code-modal { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(8px); }
    #code-modal.open { display: flex; animation: fadeIn .2s ease; }
    .code-modal-box { background: #141210; border: 1px solid #2a221c; border-radius: 18px; width: 100%; max-width: 860px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: slideUp .25s ease; }
    .code-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #2a221c; flex-shrink: 0; background: #141210; }
    .code-modal-title { font-family: 'Syne',sans-serif; font-weight: 700; font-size: .95rem; color: #ede0cc; display: flex; align-items: center; gap: 8px; }
    .code-modal-body { flex: 1; overflow: hidden; }
    .code-modal-pre { margin: 0; padding: 24px; overflow: auto; font-family: 'Fira Code','Monaco',monospace; font-size: .85rem; line-height: 1.7; height: 100%; max-height: calc(90vh - 110px); background: #0c0a08; }
    .code-modal-footer { padding: 12px 20px; border-top: 1px solid #2a221c; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }

    /* ─── PRISM THEME ember ─── */
    .token.comment,.token.prolog,.token.doctype,.token.cdata { color: #5a4a3a; font-style: italic; }
    .token.punctuation { color: #9a8878; }
    .token.property,.token.tag,.token.deleted { color: #f47067; }
    .token.boolean,.token.number { color: #e07b35; }
    .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted { color: #4ade80; }
    .token.operator,.token.url,.token.variable { color: #60a5fa; }
    .token.atrule,.token.attr-value,.token.function,.token.class-name { color: #c084fc; }
    .token.keyword { color: #fb923c; font-weight: 600; }
    .token.regex,.token.important { color: #f59e0b; }
    .token.bold { font-weight: 700; } .token.italic { font-style: italic; }
    .hk-share-btn {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 10px 6px; border-radius: 12px; background: transparent;
      border: none; cursor: pointer; transition: background .2s;
    }
    .hk-share-btn:hover { background: rgba(255,255,255,.05); }
    .hk-share-btn:active { transform: scale(.94); }
    .hk-share-icon {
      width: 48px; height: 48px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.3);
      flex-shrink: 0;
    }
    .hk-share-label {
      font-size: 11px; color: #9a8878;
      font-family: 'DM Sans', sans-serif;
      text-align: center; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 68px;
    }
    #custom-share-modal.open { display: flex !important; }
    #custom-share-modal.open #share-sheet-inner { transform: translateY(0) !important; }