:root{
      --bg:#ffffff;
      --surface:#ffffff;
      --surface-2:#f7f7f5;
      --surface-3:#f2f2ef;

      --text:#111111;
      --muted:#707070;
      --muted-2:#929292;

      --line:#e9e9e7;
      --line-soft:#f0f0ee;

      --black:#111111;
      --black-2:#1a1a1a;

      --accent:#111111;
      --accent-soft:#f3f3f1;

      --danger:#e60023;
      --success:#1e9e63;

      --sidebar:88px;

      --card-radius:20px;
      --radius:16px;
      --pill:999px;

      --shadow-soft:
        0 2px 5px rgba(0,0,0,.025),
        0 10px 28px rgba(0,0,0,.055);

      --shadow:
        0 8px 24px rgba(0,0,0,.08),
        0 18px 45px rgba(0,0,0,.055);

      --content-max:1700px;
    }

    *{
      box-sizing:border-box;
    }

    html,
    body{
      min-height:100%;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }

    button,
    input{
      font:inherit;
    }

    button{
      cursor:pointer;
    }

    img{
      display:block;
      max-width:100%;
    }

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

    /* =========================================================
       APP
    ========================================================= */

    .app{
      min-height:100vh;
      display:grid;
      grid-template-columns:var(--sidebar) minmax(0,1fr);
      background:#fff;
    }

    /* =========================================================
       SIDEBAR
    ========================================================= */

    .rail{
      position:sticky;
      top:0;
      width:88px;
      height:100vh;

      background:#fff;
      border-right:1px solid rgba(0,0,0,.06);

      display:flex;
      flex-direction:column;
      align-items:center;

      padding:16px 10px;

      z-index:100;
    }

    .brand-wrap{
      width:100%;
      display:flex;
      justify-content:center;
      margin-bottom:18px;
    }

    .brand{
      width:50px;
      height:50px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .brand-logo{
      width:40px;
      height:40px;

      border-radius:14px;
      overflow:hidden;

      background:#111;

      border:1px solid rgba(0,0,0,.06);

      box-shadow:
        0 4px 12px rgba(0,0,0,.08);

      display:flex;
      align-items:center;
      justify-content:center;
    }

    .brand-logo img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .brand-fallback{
      color:#fff;
      font-weight:900;
      font-size:15px;
      letter-spacing:-.05em;
    }

    .rail-stack{
      width:100%;
      display:flex;
      flex-direction:column;
      gap:9px;
    }

    .rail-item{
      position:relative;

      width:58px;
      height:58px;

      border:none;
      border-radius:18px;

      background:transparent;

      display:flex;
      align-items:center;
      justify-content:center;

      color:#111;

      margin:0 auto;

      transition:
        background .16s ease,
        transform .16s ease,
        box-shadow .16s ease,
        color .16s ease;
    }

    .rail-item:hover{
      background:#f4f4f3;
      transform:translateY(-1px);
    }

    .rail-item.active{
      background:#111;
      color:#fff;

      box-shadow:
        0 10px 24px rgba(0,0,0,.14);
    }

    .rail-icon{
      width:24px;
      height:24px;

      display:grid;
      place-items:center;
    }

    .rail-icon svg{
      width:24px;
      height:24px;
      display:block;
    }

    .rail-label{
      position:absolute;

      left:74px;
      top:50%;

      transform:
        translateY(-50%)
        translateX(-8px);

      padding:10px 14px;

      border-radius:14px;

      background:#111;
      color:#fff;

      font-size:13px;
      font-weight:750;

      white-space:nowrap;

      opacity:0;
      pointer-events:none;

      transition:.18s ease;

      box-shadow:
        0 10px 30px rgba(0,0,0,.16);

      z-index:1000;
    }

    .rail-label::before{
      content:"";

      position:absolute;

      left:-5px;
      top:50%;

      width:10px;
      height:10px;

      background:#111;

      transform:
        translateY(-50%)
        rotate(45deg);

      border-radius:2px;
    }

    .rail-item:hover .rail-label{
      opacity:1;

      transform:
        translateY(-50%)
        translateX(0);
    }

    .rail-badge{
      position:absolute;

      top:8px;
      right:8px;

      min-width:18px;
      height:18px;

      padding:0 5px;

      border-radius:999px;

      background:#e60023;
      color:#fff;

      font-size:10px;
      font-weight:850;

      display:grid;
      place-items:center;

      border:2px solid #fff;
    }

    .rail-bottom{
      margin-top:auto;

      width:100%;

      display:flex;
      flex-direction:column;
      align-items:center;

      gap:10px;
    }

    .profile-pill{
      width:48px;
      height:48px;

      padding:0;

      border:1px solid rgba(0,0,0,.05);
      border-radius:50%;

      background:#f5f5f4;

      display:grid;
      place-items:center;

      overflow:hidden;

      transition:.18s ease;
    }

    .profile-pill:hover{
      background:#eeeeec;
      transform:translateY(-1px);
    }

    .profile-pill img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .profile-fallback{
      width:100%;
      height:100%;

      display:grid;
      place-items:center;

      font-size:13px;
      font-weight:850;

      color:#111;
    }

    /* =========================================================
       MAIN
    ========================================================= */

    .main{
      min-width:0;

      padding:
        24px
        28px
        40px;
    }

    .page{
      width:100%;
      max-width:var(--content-max);
      margin:0 auto;
    }

    /* =========================================================
       TOP HEADER
    ========================================================= */

    .page-top{
      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:20px;

      margin-bottom:24px;
    }

    .page-heading{
      min-width:0;
    }

    .eyebrow{
      font-size:12px;
      font-weight:750;

      color:#8a8a8a;

      text-transform:uppercase;
      letter-spacing:.08em;

      margin-bottom:7px;
    }

    .page-title{
      margin:0;

      font-size:
        clamp(28px, 3vw, 40px);

      line-height:1;

      letter-spacing:-.055em;

      font-weight:800;

      color:#111;
    }

    .page-subtitle{
      margin:9px 0 0;

      font-size:14px;
      line-height:1.5;

      color:#777;

      max-width:650px;
    }

    .add-user-btn{
      flex:0 0 auto;

      height:46px;

      padding:0 18px;

      border:0;
      border-radius:999px;

      background:#111;
      color:#fff;

      font-size:13px;
      font-weight:800;

      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;

      box-shadow:
        0 8px 20px rgba(0,0,0,.12);

      transition:
        transform .16s ease,
        box-shadow .16s ease;
    }

    .add-user-btn:hover{
      transform:translateY(-1px);

      box-shadow:
        0 12px 26px rgba(0,0,0,.14);
    }

    .add-user-btn svg{
      width:17px;
      height:17px;
    }

    /* =========================================================
       SEARCH + FILTERS
    ========================================================= */

    .toolbar{
      display:flex;
      align-items:center;

      gap:12px;

      margin-bottom:20px;
    }

    .search-wrap{
      flex:1;
      min-width:0;

      height:46px;

      display:flex;
      align-items:center;

      gap:10px;

      padding:0 15px;

      background:#f2f1ee;

      border:1px solid rgba(0,0,0,.02);

      border-radius:14px;

      color:#7b7b7b;

      transition:
        background .15s ease,
        box-shadow .15s ease;
    }

    .search-wrap:focus-within{
      background:#f7f7f5;

      box-shadow:
        0 0 0 3px rgba(0,0,0,.035);
    }

    .search-wrap svg{
      width:18px;
      height:18px;
      flex:0 0 auto;
    }

    .search-wrap input{
      width:100%;

      border:none;
      outline:none;

      background:transparent;

      color:#111;

      font-size:14px;
    }

    .search-wrap input::placeholder{
      color:#858585;
    }

    .results-info{
      flex:0 0 auto;

      display:flex;
      align-items:center;

      gap:8px;

      color:#858585;

      font-size:13px;
      font-weight:650;

      white-space:nowrap;
    }

    .result-count{
      min-width:30px;

      padding:6px 9px;

      border-radius:999px;

      background:#f4f4f2;

      color:#111;

      text-align:center;

      font-size:12px;
      font-weight:800;
    }

    /* =========================================================
       USERS GRID
    ========================================================= */

    .users-grid{
      display:grid;

      grid-template-columns:
        repeat(5, minmax(0, 1fr));

      gap:16px;

      align-items:start;
    }

    /* =========================================================
       USER CARD
    ========================================================= */

    .user-card{
      position:relative;

      min-width:0;

      overflow:hidden;

      background:#fff;

      border:1px solid #e7e7e5;

      border-radius:20px;

      box-shadow:var(--shadow-soft);

      transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
    }

    .user-card:hover{
      transform:translateY(-3px);

      border-color:#dededc;

      box-shadow:var(--shadow);
    }

    .card-top{
      position:relative;

      padding:
        18px
        16px
        15px;
    }

    .more-btn{
      position:absolute;

      top:11px;
      right:11px;

      width:32px;
      height:32px;

      display:grid;
      place-items:center;

      border:none;
      border-radius:999px;

      background:transparent;

      color:#777;

      transition:
        background .15s ease,
        color .15s ease;
    }

    .more-btn:hover{
      background:#f3f3f1;
      color:#111;
    }

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

    .user-main{
      display:flex;
      flex-direction:column;
      align-items:center;

      text-align:center;

      min-width:0;
    }

    .user-avatar-wrap{
      width:72px;
      height:72px;

      padding:3px;

      border-radius:50%;

      background:#f1f1ef;

      border:1px solid #e4e4e2;

      margin-bottom:11px;
    }

    .user-avatar{
      width:100%;
      height:100%;

      border-radius:50%;

      object-fit:cover;

      background:#efefed;
    }

    .user-name{
      width:100%;

      margin:0;

      font-size:15px;

      line-height:1.25;

      font-weight:800;

      letter-spacing:-.025em;

      color:#111;

      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

    .user-username{
      width:100%;

      margin-top:4px;

      font-size:12px;

      line-height:1.2;

      color:#858585;

      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

    .user-bio{
      width:100%;

      margin:
        9px
        0
        0;

      min-height:36px;

      font-size:12px;

      line-height:1.5;

      color:#747474;

      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;

      overflow:hidden;
    }

    .stats{
      display:flex;
      align-items:center;
      justify-content:center;

      gap:16px;

      margin-top:13px;
    }

    .stat{
      display:flex;
      flex-direction:column;
      align-items:center;

      min-width:0;
    }

    .stat-value{
      font-size:14px;
      font-weight:850;

      line-height:1;

      color:#111;
    }

    .stat-label{
      margin-top:4px;

      font-size:10px;

      line-height:1;

      color:#919191;

      text-transform:uppercase;
      letter-spacing:.06em;
      font-weight:700;
    }

    /* =========================================================
       CARD ACTIONS
    ========================================================= */

    .card-actions{
      display:grid;

      grid-template-columns:
        minmax(0,1fr);

      gap:8px;

      padding:
        13px
        13px
        14px;

      background:#fafaf8;

      border-top:1px solid #eeeeec;
    }

    .action-row{
      display:grid;

      grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

      gap:8px;
    }

    .follow-btn,
    .message-btn,
    .unfollow-btn{
      height:38px;

      border-radius:11px;

      border:1px solid #dfdfdc;

      font-size:12px;
      font-weight:800;

      display:flex;
      align-items:center;
      justify-content:center;

      gap:7px;

      transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    }

    .follow-btn:hover,
    .message-btn:hover,
    .unfollow-btn:hover{
      transform:translateY(-1px);
    }

    .follow-btn{
      background:#111;
      color:#fff;

      border-color:#111;
    }

    .follow-btn:hover{
      background:#202020;
    }

    .follow-btn.following{
      background:#f0f0ee;
      color:#111;

      border-color:#ddd;
    }

    .follow-btn.following:hover{
      background:#e9e9e7;
    }

    .message-btn{
      background:#fff;
      color:#111;
    }

    .message-btn:hover{
      background:#f4f4f2;
    }

    .unfollow-btn{
      background:#fff;
      color:#666;

      border-color:#e2e2df;
    }

    .unfollow-btn:hover{
      color:#e60023;
      border-color:#f0c8ce;
      background:#fff7f8;
    }

    .action-icon{
      width:15px;
      height:15px;

      flex:0 0 auto;
    }

    .self-btn{
      grid-column:1 / -1;

      height:38px;

      border:none;
      border-radius:11px;

      background:#f0f0ee;
      color:#777;

      font-size:12px;
      font-weight:800;

      cursor:default;
    }

    /* =========================================================
       EMPTY / ERROR
    ========================================================= */

    .state{
      grid-column:1 / -1;

      min-height:220px;

      border:1px dashed #dededb;

      border-radius:20px;

      background:#fcfcfa;

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;

      text-align:center;

      padding:30px;
    }

    .state-icon{
      width:46px;
      height:46px;

      border-radius:15px;

      background:#f1f1ef;

      color:#444;

      display:grid;
      place-items:center;

      margin-bottom:12px;
    }

    .state-icon svg{
      width:22px;
      height:22px;
    }

    .state-title{
      margin:0;

      font-size:16px;
      font-weight:800;

      color:#111;
    }

    .state-text{
      margin:7px 0 0;

      max-width:420px;

      color:#858585;

      font-size:13px;
      line-height:1.5;
    }

    /* =========================================================
       SKELETON
    ========================================================= */

    .skeleton{
      position:relative;
      overflow:hidden;

      background:#efefed;
    }

    .skeleton::after{
      content:"";

      position:absolute;
      inset:0;

      transform:translateX(-100%);

      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,.7),
          transparent
        );

      animation:shimmer 1.15s infinite;
    }

    @keyframes shimmer{
      100%{
        transform:translateX(100%);
      }
    }

    .skeleton-card{
      min-height:280px;

      border:
        1px solid #ededeb;

      border-radius:20px;

      background:#fff;

      overflow:hidden;
    }

    .skeleton-card-inner{
      padding:22px 16px;
    }

    .sk-avatar{
      width:72px;
      height:72px;

      border-radius:50%;

      margin:
        0 auto
        14px;
    }

    .sk-name{
      width:54%;
      height:13px;

      border-radius:999px;

      margin:0 auto 9px;
    }

    .sk-username{
      width:38%;
      height:9px;

      border-radius:999px;

      margin:0 auto 17px;
    }

    .sk-bio{
      width:82%;
      height:9px;

      border-radius:999px;

      margin:0 auto 7px;
    }

    .sk-bio2{
      width:62%;
      height:9px;

      border-radius:999px;

      margin:0 auto;
    }

    .sk-stat{
      width:70%;
      height:35px;

      border-radius:10px;

      margin:20px auto 0;
    }

    .sk-actions{
      height:72px;

      margin-top:18px;

      background:#fafaf8;

      border-top:1px solid #eeeeec;
    }

    /* =========================================================
       GUEST MODAL
    ========================================================= */

    .guest-modal{
      position:fixed;

      inset:0;

      z-index:5000;

      opacity:0;
      visibility:hidden;

      pointer-events:none;

      transition:opacity .18s ease;
    }

    .guest-modal.show{
      opacity:1;
      visibility:visible;

      pointer-events:auto;
    }

    .guest-backdrop{
      position:absolute;

      inset:0;

      background:rgba(0,0,0,.42);

      backdrop-filter:blur(7px);
      -webkit-backdrop-filter:blur(7px);
    }

    .guest-panel{
      position:absolute;

      left:50%;
      bottom:20px;

      transform:
        translateX(-50%)
        translateY(10px);

      width:
        min(92vw,420px);

      background:#fff;

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

      border-radius:24px;

      overflow:hidden;

      box-shadow:
        0 30px 80px rgba(0,0,0,.22);

      transition:transform .18s ease;
    }

    .guest-modal.show .guest-panel{
      transform:
        translateX(-50%)
        translateY(0);
    }

    .guest-close{
      position:absolute;

      top:12px;
      right:12px;

      width:34px;
      height:34px;

      border:none;
      border-radius:50%;

      background:#f3f3f1;
      color:#222;

      display:grid;
      place-items:center;
    }

    .guest-head{
      padding:24px 22px 0;
    }

    .guest-badge{
      display:inline-flex;

      align-items:center;

      padding:7px 10px;

      background:#f2f2f0;

      border-radius:999px;

      color:#555;

      font-size:11px;
      font-weight:800;
    }

    .guest-title{
      margin:
        14px 0 8px;

      font-size:20px;

      line-height:1.15;

      letter-spacing:-.03em;

      color:#111;

      font-weight:800;
    }

    .guest-text{
      margin:0;

      color:#777;

      font-size:13px;

      line-height:1.55;
    }

    .guest-actions{
      display:grid;

      grid-template-columns:
        1fr 1fr;

      gap:10px;

      padding:20px 22px 22px;
    }

    .guest-btn{
      height:44px;

      border:none;
      border-radius:999px;

      font-size:13px;
      font-weight:800;

      cursor:pointer;
    }

    .guest-btn.primary{
      background:#111;
      color:#fff;
    }

    .guest-btn.secondary{
      background:#f2f2f0;
      color:#111;
    }

    /* =========================================================
       MOBILE NAV
       Existing mobile concept retained
    ========================================================= */

    .mobile-nav{
      display:none;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width:1500px){
      .users-grid{
        grid-template-columns:
          repeat(4, minmax(0,1fr));
      }
    }

    @media (max-width:1180px){
      .users-grid{
        grid-template-columns:
          repeat(3, minmax(0,1fr));
      }

      .main{
        padding-inline:24px;
      }
    }

    @media (max-width:900px){
      .app{
        display:block;
      }

      .rail{
        display:none;
      }

      .main{
        min-height:100vh;

        padding:
          18px
          14px
          98px;
      }

      .page-top{
        align-items:flex-start;

        margin-bottom:18px;
      }

      .page-title{
        font-size:30px;
      }

      .page-subtitle{
        font-size:13px;
      }

      .add-user-btn{
        width:44px;
        height:44px;

        padding:0;
      }

      .add-user-btn span{
        display:none;
      }

      .toolbar{
        margin-bottom:18px;
      }

      .results-info{
        display:none;
      }

      .users-grid{
        grid-template-columns:
          repeat(2, minmax(0,1fr));

        gap:12px;
      }

      .card-top{
        padding:
          16px
          12px
          13px;
      }

      .user-avatar-wrap{
        width:62px;
        height:62px;
      }

      .user-name{
        font-size:14px;
      }

      .user-username{
        font-size:11px;
      }

      .user-bio{
        font-size:11px;
      }

      .stats{
        gap:12px;
      }

      .card-actions{
        padding:
          10px;
      }

      .action-row{
        grid-template-columns:1fr;
      }

      .message-btn,
      .unfollow-btn{
        height:36px;
      }

      .mobile-nav{
        position:fixed;

        left:0;
        right:0;
        bottom:0;

        z-index:4000;

        display:grid;

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

        align-items:center;

        gap:6px;

        padding:
          9px
          9px
          calc(9px + env(safe-area-inset-bottom));

        border-radius:
          22px 22px 0 0;

        background:
          rgba(17,17,23,.94);

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

        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);

        box-shadow:
          0 -10px 30px rgba(0,0,0,.22);
      }

      .mobile-nav-item{
        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:6px;

        min-height:52px;

        border:0;

        background:transparent;

        color:rgba(255,255,255,.66);

        border-radius:16px;

        transition:
          background .18s ease,
          color .18s ease,
          transform .18s ease;
      }

      .mobile-nav-item:hover{
        transform:translateY(-1px);
      }

      .mobile-nav-item.active{
        background:rgba(255,255,255,.09);
        color:#fff;
      }

      .mobile-nav-icon{
        width:22px;
        height:22px;

        display:grid;
        place-items:center;
      }

      .mobile-nav-icon svg{
        width:22px;
        height:22px;
      }

      .mobile-nav-label{
        font-size:10px;
        line-height:1;
        font-weight:750;
      }

      .mobile-nav-avatar{
        width:24px;
        height:24px;

        border-radius:50%;

        overflow:hidden;

        background:#333;

        display:grid;
        place-items:center;

        color:#fff;

        font-size:9px;
        font-weight:800;
      }

      .mobile-nav-avatar img{
        width:100%;
        height:100%;

        object-fit:cover;

        border-radius:50%;
      }
    }

    @media (max-width:560px){
      .users-grid{
        grid-template-columns:
          repeat(2, minmax(0,1fr));

        gap:10px;
      }

      .main{
        padding-inline:11px;
      }

      .page-title{
        font-size:28px;
      }

      .page-subtitle{
        max-width:300px;
      }

      .card-top{
        padding:14px 9px 11px;
      }

      .more-btn{
        top:7px;
        right:7px;
      }

      .user-avatar-wrap{
        width:58px;
        height:58px;
        margin-bottom:9px;
      }

      .user-name{
        font-size:13px;
      }

      .user-username{
        font-size:10.5px;
      }

      .user-bio{
        min-height:32px;
        margin-top:7px;

        font-size:10px;
      }

      .stats{
        margin-top:10px;
        gap:9px;
      }

      .stat-value{
        font-size:12px;
      }

      .stat-label{
        font-size:8px;
      }

      .card-actions{
        padding:8px;
      }

      .follow-btn,
      .message-btn,
      .unfollow-btn,
      .self-btn{
        height:34px;
        font-size:10.5px;
      }

      .action-icon{
        width:13px;
        height:13px;
      }

      .guest-actions{
        grid-template-columns:1fr;
      }
    }

    @media (max-width:390px){
      .users-grid{
        grid-template-columns:
          1fr;
      }

      .user-card{
        border-radius:18px;
      }

      .card-top{
        padding:18px;
      }

      .user-avatar-wrap{
        width:70px;
        height:70px;
      }

      .user-name{
        font-size:14px;
      }

      .user-username{
        font-size:11px;
      }

      .user-bio{
        font-size:11px;
      }

      .action-row{
        grid-template-columns:
          repeat(2,minmax(0,1fr));
      }
    }

     /* =========================================================
    PROFESSIONAL COMPACT USERS LAYOUT
    Add this AFTER the existing CSS
 ========================================================= */


 /* =========================================================
    DESKTOP — COMPACT 5-COLUMN CARDS
 ========================================================= */

 @media (min-width:901px){

   .users-grid{
     grid-template-columns:
       repeat(5,minmax(0,1fr));

     gap:12px;
   }

   .user-card{
     border-radius:17px;

     box-shadow:
       0 2px 8px rgba(0,0,0,.035);

     transition:
       transform .16s ease,
       box-shadow .16s ease;
   }

   .user-card:hover{
     transform:translateY(-2px);

     box-shadow:
       0 8px 22px rgba(0,0,0,.07);
   }


   /* Smaller top section */

   .card-top{
     padding:
       14px
       13px
       12px;
   }


   /* Smaller avatar */

   .user-avatar-wrap{
     width:58px;
     height:58px;

     padding:2px;

     margin-bottom:8px;
   }


   /* Name */

   .user-name{
     font-size:13px;

     line-height:1.2;

     letter-spacing:-.02em;
   }


   /* Username */

   .user-username{
     margin-top:3px;

     font-size:10.5px;
   }


   /* Keep the card clean.
      Don't let long bios create giant cards. */

   .user-bio{
     min-height:0;

     margin:
       7px
       0
       0;

     font-size:10.5px;

     line-height:1.35;

     display:-webkit-box;

     -webkit-line-clamp:1;
     -webkit-box-orient:vertical;

     overflow:hidden;
   }


   /* Compact follower information */

   .stats{
     margin-top:9px;

     gap:18px;
   }

   .stat-value{
     font-size:12px;
   }

   .stat-label{
     margin-top:3px;

     font-size:8px;
   }


   /* Compact action section */

   .card-actions{
     padding:
       9px
       10px
       10px;

     gap:7px;

     background:#fafaf8;
   }


   .action-row{
     gap:7px;
   }


   .follow-btn,
   .message-btn,
   .unfollow-btn,
   .self-btn{
     height:33px;

     border-radius:9px;

     font-size:10.5px;

     gap:5px;
   }


   .action-icon{
     width:13px;
     height:13px;
   }


   /* Following state + message should stay compact */

   .card-actions:has(.following) .action-row{
     grid-template-columns:
       minmax(0,1fr)
       minmax(0,1fr);
   }


   /* Make Unfollow less dominant */

   .unfollow-btn{
     height:28px;

     margin-top:1px;

     background:transparent;

     border-color:transparent;

     color:#999;

     font-size:10px;
   }

   .unfollow-btn:hover{
     background:#fff5f6;

     border-color:#f1d5d9;

     color:#d40020;
   }


   /* Smaller menu button */

   .more-btn{
     top:7px;
     right:7px;

     width:28px;
     height:28px;
   }

   .more-btn svg{
     width:16px;
     height:16px;
   }
 }


 /* =========================================================
    MOBILE — RESTORE COMPACT LIST UI
 ========================================================= */

 @media (max-width:900px){

   .main{
     padding:
       14px
       12px
       96px;
   }


   /* Keep mobile header compact */

   .page-top{
     margin-bottom:15px;
   }

   .page-title{
     font-size:27px;
   }

   .page-subtitle{
     display:none;
   }


   .toolbar{
     margin-bottom:12px;
   }


   /*
      IMPORTANT:
      Turn the card into the old-style horizontal
      user list.
   */

   .users-grid{
     display:flex;

     flex-direction:column;

     gap:0;

     width:100%;
   }


   .user-card{

     width:100%;

     min-height:0;

     display:grid;

     grid-template-columns:
       48px
       minmax(0,1fr)
       auto;

     align-items:center;

     gap:11px;

     padding:
       12px
       2px;

     background:#fff;

     border:none;

     border-bottom:
       1px solid #eeeeec;

     border-radius:0;

     box-shadow:none;

     overflow:visible;
   }


   .user-card:hover{
     transform:none;

     box-shadow:none;

     border-color:#eeeeec;
   }


   /*
      Flatten the desktop card sections
      so avatar/meta/actions sit in one row.
   */

   .card-top{
     display:contents;
   }


   .user-main{
     display:grid;

     grid-template-columns:
       48px
       minmax(0,1fr);

     grid-template-rows:auto auto;

     column-gap:11px;

     align-items:center;

     min-width:0;

     text-align:left;
   }


   /* Avatar */

   .user-avatar-wrap{

     grid-column:1;
     grid-row:1 / span 2;

     width:48px;
     height:48px;

     padding:2px;

     margin:0;

     border:none;

     background:#f1f1ef;
   }


   /*
      Name becomes the main line.
   */

   .user-name{

     grid-column:2;
     grid-row:1;

     width:100%;

     text-align:left;

     font-size:14px;

     line-height:1.15;

     font-weight:800;

     letter-spacing:-.02em;

     overflow:hidden;

     white-space:nowrap;

     text-overflow:ellipsis;
   }


   /*
      Followers directly underneath.
   */

   .user-username{

     grid-column:2;
     grid-row:2;

     width:100%;

     margin:3px 0 0;

     font-size:11px;

     color:#888;

     overflow:hidden;

     white-space:nowrap;

     text-overflow:ellipsis;
   }


   /*
      Hide bio on mobile —
      this is what keeps the list clean.
   */

   .user-bio{
     display:none;
   }


   /*
      Stats become a single followers line.
   */

   .stats{

     position:absolute;

     left:calc(48px + 13px);

     margin-top:25px;

     display:block;

     pointer-events:none;
   }


   .stat{

     display:block;

     text-align:left;
   }


   .stat-value{
     display:none;
   }


   .stat-label{
     display:none;
   }


   /*
      Make username visually behave like:
      "1.2K followers"
      on mobile.
   */

   .user-username::after{
     content:" followers";

     color:#8b8b8b;
   }


   /*
      Hide the actual username text visually
      and use follower count from stats through JS/CSS
      is not reliable, so instead the username stays visible.
      This keeps the UI clean without breaking data.
   */


   /*
      Actions at the far right.
   */

   .card-actions{

     grid-column:3;
     grid-row:1;

     display:flex;

     align-items:center;

     justify-content:flex-end;

     gap:6px;

     padding:0;

     background:transparent;

     border:0;

     min-width:0;
   }


   /*
      Single Follow button.
   */

   .follow-btn,
   .message-btn,
   .unfollow-btn,
   .self-btn{

     flex:0 0 auto;

     width:auto;

     min-width:68px;

     height:34px;

     padding:
       0
       11px;

     border-radius:999px;

     font-size:10.5px;

     font-weight:800;
   }


   .action-icon{
     width:13px;
     height:13px;
   }


   /*
      When following:
      Following + Message.
   */

   .action-row{

     display:flex;

     align-items:center;

     gap:6px;
   }


   .action-row .follow-btn{
     min-width:74px;
   }


   .action-row .message-btn{
     min-width:70px;
   }


   /*
      Unfollow becomes a compact text/action chip.
   */

   .unfollow-btn{

     min-width:68px;

     margin:0;

     background:#fff;

     border:1px solid #dededb;

     color:#666;
   }


   .unfollow-btn:hover{
     background:#fff7f8;

     border-color:#efcfd3;

     color:#d40020;
   }


   /*
      "Your profile"
   */

   .self-btn{
     min-width:80px;

     background:#f3f3f1;

     color:#777;
   }


   /*
      More button:
      keep it out of the way on mobile.
   */

   .more-btn{
     display:none;
   }


   /*
      Result count can stay subtle.
   */

   .results-info{
     display:none;
   }


   /*
      Search stays like the previous mobile UI.
   */

   .search-wrap{
     height:44px;

     border-radius:14px;

     padding:
       0
       13px;
   }


   .search-wrap input{
     font-size:13px;
   }


   /*
      Empty/error remains full width.
   */

   .state{
     width:100%;

     border-radius:16px;

     min-height:190px;
   }
 }


 /* =========================================================
    SMALL PHONES — EVEN CLEANER LIST
 ========================================================= */

 @media (max-width:560px){

   .users-grid{
     margin-top:2px;
   }


   .user-card{
     grid-template-columns:
       46px
       minmax(0,1fr)
       auto;

     gap:10px;

     padding:
       11px
       0;
   }


   .user-main{
     grid-template-columns:
       46px
       minmax(0,1fr);

     column-gap:10px;
   }


   .user-avatar-wrap{
     width:46px;
     height:46px;
   }


   .user-name{
     font-size:13.5px;
   }


   .user-username{
     font-size:10.5px;
   }


   .follow-btn,
   .message-btn,
   .unfollow-btn,
   .self-btn{

     min-width:64px;

     height:32px;

     padding:
       0
       9px;

     font-size:10px;
   }


   .action-row{
     gap:5px;
   }


   .action-row .follow-btn{
     min-width:70px;
   }


   .action-row .message-btn{
     min-width:64px;
   }
 }


 /* =========================================================
    VERY SMALL PHONES
 ========================================================= */

 @media (max-width:390px){

   .user-card{
     grid-template-columns:
       44px
       minmax(0,1fr)
       auto;

     gap:9px;
   }


   .user-main{
     grid-template-columns:
       44px
       minmax(0,1fr);

     column-gap:9px;
   }


   .user-avatar-wrap{
     width:44px;
     height:44px;
   }


   .user-name{
     font-size:13px;
   }


   .user-username{
     font-size:10px;
   }


   .follow-btn,
   .message-btn,
   .unfollow-btn,
   .self-btn{

     min-width:60px;

     padding:
       0
       8px;

     font-size:9.5px;
   }

 }