[html]<section class="apps-wrapper" id="names-directory">
  <h5>имена и фамилии</h5>
 
  <div class="apps-container">
   
    <!-- КОЛОНКА ИМЕН -->
    <div class="directory-column">
      <div class="column-title">Имена</div>
      <div class="directory-content" id="names-content">
        <!-- NAMES START -->

<div class="alpha-group" data-group="abc">
  <span>abc</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=44" data-name="ace cuddy">ace</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=130" data-name="aidan blomfield">aidan</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=22" data-name="alice rutherford">alice</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=8" data-name="amorie leroy">amorie</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=141" data-name="andy white">andy</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=52" data-name="anhelm hale">anhelm</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=150" data-name="anita jones">anita</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=12" data-name="anthony moretti">anthony</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=41" data-name="august von rosenkrantz">august</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=112" data-name="bast hawthorne">bast</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=142" data-name="blainn kolbrand">blainn</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=4" data-name="caleb de luca">caleb</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=110" data-name="charlotte devero">charlotte</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=103" data-name="conor o'reilly">conor</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="def">
  <span>def</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=84" data-name="dante falcone">dante</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=64" data-name="derek reed">derek</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=53" data-name="edward kelleher">edward</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=121" data-name="einar lacroix">einar</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=114" data-name="elias navarro">elias</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=14" data-name="elion solari">elion</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=32" data-name="emmy langdon">emmy</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=120" data-name="erin spencer">erin</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=18" data-name="ethan o’keeffe">ethan</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=24" data-name="ezekiel nygard">ezekiel</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=37" data-name="fellise moro">fellise</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="ghij">
  <span>ghij</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=107" data-name="grace spencer">grace</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=122" data-name="harlan price">harlan</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=80" data-name="harper collins">harper</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=105" data-name="isabella kelleher">isabella</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=109" data-name="jacqueline stevens">jacqueline</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=115" data-name="jan cannata">jan</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=5" data-name="jay lee">jay</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=66" data-name="john brooks">john</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=34" data-name="johnny bravo">johnny</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=145" data-name="julian espen">julian</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="klmn">
  <span>klmn</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=70" data-name="keith caulder">keith</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=29" data-name="kirsten christ">kirsten</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=26" data-name="kyle eastman">kyle</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=108" data-name="laura hayes">laura</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=13" data-name="leonardo leroy">leonardo</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=73" data-name="letizia riva">letizia</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=133" data-name="liam walker">liam</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=19" data-name="lorenzo de luca">lorenzo</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=98" data-name="lou renard">lou</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=85" data-name="maeve kelleher">maeve</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=20" data-name="margot kincaid">margot</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=23" data-name="marvin streep">marvin</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=40" data-name="mason blackwood">mason</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=17" data-name="mateo casas">mateo</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=136" data-name="matt moore">matt</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=11" data-name="mercy hill">mercy</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=6" data-name="michele falcone">michele</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=111" data-name="miles brady">miles</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=7" data-name="moon yoon jun">moon</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=21" data-name="moon minjae">moon</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=9" data-name="neve grayson">neve</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=144" data-name="noel albarn">noel</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="opq">
  <span>opq</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=16" data-name="penelope wright">penelope</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=48" data-name="peter novack">peter</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=95" data-name="пеперони">пеперони</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="rstu">
  <span>rstu</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=28" data-name="reimi laurent">reimi</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=82" data-name="richard pure">richard</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=102" data-name="robert schultzberg">robert</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=129" data-name="rory tierney">rory</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=124" data-name="sienna donovan">sienna</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=113" data-name="sky valentine">sky</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=74" data-name="talia morrow">talia</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=135" data-name="theo moore">theo</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=131" data-name="theodore corey">theodore</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=76" data-name="thomas riegel">thomas</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=149" data-name="tucker cohen">tucker</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="vwxyz">
  <span>vwxyz</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=72" data-name="verity collins">verity</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=87" data-name="vi harper">vi</a></div>
  </namelist>
</div>

<!-- NAMES END -->
      </div>
    </div>

    <!-- КОЛОНКА ФАМИЛИЙ -->
    <div class="directory-column">
      <div class="column-title">Фамилии (Семьи)</div>
      <div class="directory-content" id="surnames-content">
        <!-- SURNAMES START -->

<div class="alpha-group" data-group="abc">
  <span>abc</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=144" data-name="noel albarn">albarn</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=40" data-name="mason blackwood">blackwood</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=130" data-name="aidan blomfield">blomfield</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=111" data-name="miles brady">brady</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=34" data-name="johnny bravo">bravo</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=66" data-name="john brooks">brooks</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=115" data-name="jan cannata">cannata</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=17" data-name="mateo casas">casas</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=70" data-name="keith caulder">caulder</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=29" data-name="kirsten christ">christ</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=149" data-name="tucker cohen">cohen</a></div>
    <div class="surname-group">
      <span class="surname-trigger">collins <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=80" data-name="harper collins">harper collins</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=72" data-name="verity collins">verity collins</a></div>
      </div>
    </div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=131" data-name="theodore corey">corey</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=44" data-name="ace cuddy">cuddy</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="def">
  <span>def</span>
  <namelist>
    <div class="surname-group">
      <span class="surname-trigger">de luca <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=4" data-name="caleb de luca">caleb de luca</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=19" data-name="lorenzo de luca">lorenzo de luca</a></div>
      </div>
    </div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=110" data-name="charlotte devero">devero</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=124" data-name="sienna donovan">donovan</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=26" data-name="kyle eastman">eastman</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=145" data-name="julian espen">espen</a></div>
    <div class="surname-group">
      <span class="surname-trigger">falcone <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=84" data-name="dante falcone">dante falcone</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=6" data-name="michele falcone">michele falcone</a></div>
      </div>
    </div>
  </namelist>
</div>

<div class="alpha-group" data-group="ghij">
  <span>ghij</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=9" data-name="neve grayson">grayson</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=52" data-name="anhelm hale">hale</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=87" data-name="vi harper">harper</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=112" data-name="bast hawthorne">hawthorne</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=108" data-name="laura hayes">hayes</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=11" data-name="mercy hill">hill</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=150" data-name="anita jones">jones</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="klmn">
  <span>klmn</span>
  <namelist>
    <div class="surname-group">
      <span class="surname-trigger">kelleher <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=53" data-name="edward kelleher">edward kelleher</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=105" data-name="isabella kelleher">isabella kelleher</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=85" data-name="maeve kelleher">maeve kelleher</a></div>
      </div>
    </div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=20" data-name="margot kincaid">kincaid</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=142" data-name="blainn kolbrand">kolbrand</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=121" data-name="einar lacroix">lacroix</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=32" data-name="emmy langdon">langdon</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=28" data-name="reimi laurent">laurent</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=5" data-name="jay lee">lee</a></div>
    <div class="surname-group">
      <span class="surname-trigger">leroy <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=8" data-name="amorie leroy">amorie leroy</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=13" data-name="leonardo leroy">leonardo leroy</a></div>
      </div>
    </div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=21" data-name="moon minjae">minjae</a></div>
    <div class="surname-group">
      <span class="surname-trigger">moore <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=136" data-name="matt moore">matt moore</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=135" data-name="theo moore">theo moore</a></div>
      </div>
    </div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=12" data-name="anthony moretti">moretti</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=37" data-name="fellise moro">moro</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=74" data-name="talia morrow">morrow</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=114" data-name="elias navarro">navarro</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=48" data-name="peter novack">novack</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=24" data-name="ezekiel nygard">nygard</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="opq">
  <span>opq</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=103" data-name="conor o'reilly">o'reilly</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=18" data-name="ethan o’keeffe">o’keeffe</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=122" data-name="harlan price">price</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=82" data-name="richard pure">pure</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="rstu">
  <span>rstu</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=64" data-name="derek reed">reed</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=98" data-name="lou renard">renard</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=76" data-name="thomas riegel">riegel</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=73" data-name="letizia riva">riva</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=22" data-name="alice rutherford">rutherford</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=102" data-name="robert schultzberg">schultzberg</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=14" data-name="elion solari">solari</a></div>
    <div class="surname-group">
      <span class="surname-trigger">spencer <i class="fa-solid fa-users"></i></span>
      <div class="surname-members">
        <div><a href="https://sixchat.rusff.me/profile.php?id=120" data-name="erin spencer">erin spencer</a></div>
        <div><a href="https://sixchat.rusff.me/profile.php?id=107" data-name="grace spencer">grace spencer</a></div>
      </div>
    </div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=109" data-name="jacqueline stevens">stevens</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=23" data-name="marvin streep">streep</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=129" data-name="rory tierney">tierney</a></div>
  </namelist>
</div>

<div class="alpha-group" data-group="vwxyz">
  <span>vwxyz</span>
  <namelist>
    <div><a href="https://sixchat.rusff.me/profile.php?id=113" data-name="sky valentine">valentine</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=41" data-name="august von rosenkrantz">von rosenkrantz</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=133" data-name="liam walker">walker</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=141" data-name="andy white">white</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=16" data-name="penelope wright">wright</a></div>
    <div><a href="https://sixchat.rusff.me/profile.php?id=7" data-name="moon yoon jun">yoon jun</a></div>
  </namelist>
</div>

<!-- SURNAMES END -->
      </div>
    </div>

  </div>
</section>

<style>
section.apps-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    background-image: var(--temp-bg);
    background-repeat: no-repeat;
    border: 1px solid rgba(174, 174, 174, 0.5);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    background-color: rgb(var(--text-primary), .04);
    border-radius: 5px;
    box-sizing: border-box;
    margin: auto !important;
    padding-bottom: 25px;
    font-family: sans-serif;
}

section.apps-wrapper * {
    box-sizing: border-box;
}

section.apps-wrapper h5 {
    height: 90px;
    width: 100%;
    font-family: Moisette, serif;
    font-weight: 600;
    font-size: 66px;
    line-height: 100%;
    font-style: italic;
    text-transform: lowercase;
    color: white;
    text-align: center;
    padding: 20px 30px 0;
    overflow: hidden;
    margin-bottom: 0px;
}

/* Сетка для колонок */
.apps-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 20px;
}

.column-title {
    text-align: center;
    text-transform: lowercase;
    font-weight: bold;
    color: rgb(var(--accent));
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(174, 174, 174, 0.3);
    padding-bottom: 5px;
}

/* Блоки алфавита */
.alpha-group {
    margin-bottom: 15px;
}

.alpha-group > span {
    display: block;
    font-weight: bold;
    color: rgb(var(--text-primary), .6);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.alpha-group namelist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

/* Оформление семей (фамилий) */
.surname-group {
    margin-bottom: 8px;
}

.surname-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 3px 8px;
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    transition: 0.2s;
    user-select: none;
}

.surname-trigger:hover {
    background-color: rgba(0,0,0,0.1);
}

.surname-trigger::after {
    content: ' ▼';
    font-size: 10px;
    opacity: 0.5;
}

.surname-group.is-open .surname-trigger::after {
    content: ' ▲';
}

.surname-members {
    display: none;
    flex-direction: column;
    padding: 5px 0 5px 15px;
    border-left: 2px solid rgb(var(--accent));
    margin-top: 4px;
    gap: 4px;
    font-size: 13px;
}

.surname-group.is-open .surname-members {
    display: flex;
}

/* Оформление семей (фамилий) */
.surname-group {
    position: relative;
    display: inline-block;
}

.surname-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 3px 8px;
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    transition: 0.2s;
    user-select: none;
    text-transform: capitalize;
}

.surname-trigger:hover {
    background-color: rgba(0,0,0,0.1);
}

.surname-trigger i {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 3px;
}

.surname-members {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgb(var(--text-primary), .04); /* под цвет фона */
    border: 1px solid rgba(174, 174, 174, 0.5);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    padding: 10px;
    z-index: 100;
    border-radius: 4px;
    flex-direction: column;
    min-width: max-content;
    gap: 6px;
    backdrop-filter: blur(5px);
}

.surname-group.is-open .surname-members {
    display: flex;
}

</style>

[/html][hideprofile]