[html]<div class="sol-guest guestroom">
  <!-- ПРИВЕТСТВИЕ -->
  <div class="sg-welcome">
<i>Let the lullaby of woe wash over you</i>. Добро пожаловать в лето 1980 года. Война окутывает тенью деяний Волдеморта всё, что вам дорого, превращая само понятие безопасности в пустой звук. В такие времена уединение теряет привкус горечи и становится формой спасения. <i>Solitude</i> — это добровольное и спокойное пребывание наедине с собой, приносящее покой.
  </div>

  <!-- ПРАВИЛА -->
  <div class="sg-rules">
    <p>Срок придержания внешностей и ролей для гостей — <b>сутки.</b> Срок придержания внешностей и ролей за зарегистрированным пользователем — <b>3 дня</b> и продлить этот срок можно дважды (в сумме — 9 дней бесплатного придержания).</p>
    <p>Если вам нужно больше дней, вы можете выкупить их в банке за форумную валюту. <b>Максимальное количество — 4 внешности/роли.</b> Все, что выкуплено под заявки, имеет обозначение и ссылку на саму заявку.</p>
  </div>

<!-- БЛОК ВНЕШ -->
<div class="sg-block sg-block-app">

<div class="gue-pill">18.08</div>
<div class="gue-item"><span class="actor">emma mackey</span> — <a href="https://solitude.rusff.me/profile.php?id=147">dolores (1)</a></div>

<div class="gue-pill">20.08</div>
<div class="gue-item"><span class="actor">george mackay</span> — <a href="https://solitude.rusff.me/profile.php?id=30">сорен</a></div>

<div class="gue-pill">30.08</div>
<div class="gue-item"><span class="actor">eiza gonzalez</span>  — <a href="https://solitude.rusff.me/profile.php?id=20">meredith sallow</a></div>
<div class="gue-item"><span class="actor">hero fiennes-tiffin</span> — <a href="https://solitude.rusff.me/profile.php?id=20">meredith sallow</a></div>
<div class="gue-item"><span class="actor">freddy carter</span> — <a href="https://solitude.rusff.me/profile.php?id=147">dolores umbridge</a></div>

<div class="gue-pill">31.08</div>
<div class="gue-item"><span class="actor">bill skarsgård</span> — <a href="https://solitude.rusff.me/profile.php?id=147">dolores umbridge</a></div>
<div class="gue-item"><span class="actor">connor storrie</span> — <a href="https://solitude.rusff.me/profile.php?id=20">meredith sallow</a></div>

<div class="gue-pill">02.09</div>
<div class="gue-item"><span class="actor">louis partridge</span> — <a href="https://solitude.rusff.me/profile.php?id=147">dolores umbridge</a></div>
<div class="gue-item"><span class="actor">deva cassel</span> — <a href="https://solitude.rusff.me/profile.php?id=20">meredith sallow</a></div>

<div class="gue-pill">14.09</div>
<div class="gue-item"><span class="actor">matthew broome</span> — <a href="https://solitude.rusff.me/profile.php?id=30">сорен</a></div>

<div class="gue-pill">за амс</div>
<div class="gue-item"><span class="actor">lucy boynton</span></div>
<div class="gue-item"><span class="actor">kerem bursin</span></div>
<div class="gue-item"><span class="actor">benjamin wadsworth</span></div>
<div class="gue-item"><span class="actor">ava yaman</span></div>

</div>

<!-- БЛОК РОЛЕЙ -->
<div class="sg-block sg-block-roles">

<div class="gue-pill">18.08</div>
<div class="gue-item"><span class="actor">загонщик нетопырей ньюкасла</span> — <a href="https://solitude.rusff.me/profile.php?id=147">dolores (1)</a></div>
<div class="gue-item"><span class="actor">marsh fam.</span> — <a href="https://solitude.rusff.me/profile.php?id=147">dolores (1)</a></div>

<div class="gue-pill">27.08</div>
<div class="gue-item"><span class="actor"> rita skeeter</span> — <a href="https://solitude.rusff.me/profile.php?id=151">rita skeeter</a></div>

<div class="gue-pill">31.08</div>
<div class="gue-item"><span class="actor">загонщик в команде «Kenmare Kestrels»</span> — <a href="https://solitude.rusff.me/profile.php?id=20">meredith sallow</a></div>
<div class="gue-item"><span class="actor">Parkin</span> — <a href="https://solitude.rusff.me/profile.php?id=20">meredith sallow</a></div>

<div class="gue-pill">03.09</div>
<div class="gue-item"><span class="actor">mulciber fam.</span> — <a href="https://solitude.rusff.me/profile.php?id=20">Meredith Sallow</a></div>

<div class="gue-pill">09.09</div>
<div class="gue-item"><span class="actor">diggory fam.</span> — <a href="https://solitude.rusff.me/profile.php?id=30">сорен</a></div>

<div class="gue-pill">за амс</div>
<div class="gue-item"><span class="actor">врожденная легилименция</span></div>

</div>

  <!-- АДМИНЫ -->
  <div class="sg-admins">
    <a class="sg-admin-link" href="https://solitude.rusff.me/profile.php?id=3">brianna</a>
    <span class="sg-sep">✶</span>
    <a class="sg-admin-link" href="https://solitude.rusff.me/profile.php?id=5">chris</a>
  </div>

  <!-- КНОПКИ -->
  <div class="sg-buttons">
    <button type="button" class="sg-btn" data-copy="profile" data-default="придержать профилю">придержать профилю</button>
    <button type="button" class="sg-btn" data-copy="guest" data-default="придержать гостю">придержать гостю</button>
  </div>

</div>

<style>
  .sol-guest {
    position: relative;
    width: 844px;
    height: 615px;
    margin: 0 auto;
    background: url('https://forumstatic.ru/files/001c/b0/ba/22875.jpg') no-repeat 0 0;
    background-size: 844px 615px;
    font-family: 'Pragmatica', sans-serif;
    color: #151515;
    border-radius: var(--fp-r);
  }
  .sol-guest * { box-sizing: border-box; }

  /* === ПРИВЕТСТВИЕ === */
  .sol-guest .sg-welcome {
    position: absolute;
    top: 214px;
    left: 196px;
    width: 280px;
    height: 130px;
    font-size: 11px;
    line-height: 145%;
    color: #C9C0AC;
  }
  .sol-guest .sg-welcome b { font-weight: 700; color: #E8DBC1; }

  /* === ПРАВИЛА === */
  .sol-guest .sg-rules {
    position: absolute;
    top: 385px;
    left: 196px;
    width: 300px;
    height: 190px;
    font-size: 11px;
    line-height: 138%;
    color: #2B2C32;
    overflow-y: auto;
    padding: 4px 10px 10px 0;
  }
  .sol-guest .sg-rules p { margin: 0 0 7px 0; }
  .sol-guest .sg-rules p:last-child { margin: 0; }
  .sol-guest .sg-rules b { font-weight: 700; color: #1a1a1a; }

  /* === ПРАВЫЕ БЛОКИ === */
  .sol-guest .sg-block {
    position: absolute;
    width: 260px;
    overflow-y: auto;
    padding: 0 8px 0 0;
  }
  .sol-guest .sg-block-app   { top: 212px; left: 560px; height: 145px; }
  .sol-guest .sg-block-roles { top: 425px; left: 560px; height: 145px; }

  /* Пилюли с датами */
  .sol-guest .gue-pill {
    display: inline-block;
    min-width: 47px;
    height: 18px;
    padding: 2px 16px;
    margin: 8px 6px 8px 0;
    border-radius: 71px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 11px;
    text-align: center;
    color: var(--fp-bg);
    background: linear-gradient(90deg, #606C57 0%, #8AA17E 100%);
  }

  /* первая пилюля в блоке без верхнего отступа */
  .sol-guest .sg-block > .gue-pill:first-child { margin-top: 0; }

/* Строка списка */
.sol-guest .gue-item {
  font-family: 'Pragmatica', sans-serif;
  font-size: 11px;
  line-height: 130%;
  text-transform: lowercase;
  color: #2B2C32;
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 4px;
  transition: background 0.25s ease, color 0.25s ease;
}
.sol-guest .gue-item .actor {
  font-weight: 700;
  color: #322F2D;
  transition: color 0.25s ease;
}
.sol-guest .gue-item a {
  font-family: 'Playfair Display';
  color: #58664d;
  text-decoration: none;
  transition: color 0.25s ease;
}

.sol-guest .gue-item:hover a {
  color: #6B5A3E;
}

  /* === КНОПКИ === */
  .sol-guest .sg-buttons {
    position: absolute;
    bottom: 4px;
    left: 250px;
    width: 508px;
    display: flex;
    justify-content: space-between;
    z-index: 99;
  }
  .sol-guest .sg-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 164px;
    height: 26px;
    padding: 3px 10px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(90deg, #322F2D 0%, #675E4B 100%);
    border-radius: 54px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 11px;
    line-height: 10px;
    text-transform: lowercase;
    color: #FFFFFF;
    transition: background 0.35s ease, box-shadow 0.45s ease, transform 0.2s ease;
  }
  .sol-guest .sg-btn:hover {
    background: linear-gradient(90deg, #606C57 0%, #8AA17E 100%);
    box-shadow: 0 2px 12px rgba(178,161,134,0.35);
  }
  .sol-guest .sg-btn.is-copied {
    background: linear-gradient(90deg, #675E4B 0%, #B2A186 50%, #E8DBC1 100%);
  }

  /* === АДМИНЫ === */
  .sol-guest .sg-admins {
    position: absolute;
    top: 498px;
    left: 30px;
    width: 100px;
    text-align: center;
  }
  .sol-guest .sg-admin-link {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 11px;
    line-height: 1.4;
    color: #343331;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .sol-guest .sg-admin-link:hover { color: #6B5A3E; }
  .sol-guest .sg-admins .sg-sep { display: block; margin: 1px 0; color: #343331; font-size: 9px; }
</style>

<script type="text/javascript">
(function () {
var templates = {
  profile: '<div class="gue-item"><span class="actor">name surname внешности // роль или должность</span> — <a href="ссылка на профиль">ник</a></div>',
  guest:   '<div class="gue-item"><span class="actor">name surname внешности // роль или должность</span> — ник</div>'
};

  var btns = document.querySelectorAll('.sg-btn');
  var i;
  for (i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      var key = this.getAttribute('data-copy');
      var text = templates[key];
      if (!text) return;
      var btn = this;
      var def = btn.getAttribute('data-default') || btn.innerHTML;
      btn.setAttribute('data-default', def);

      function showToast() {
        btn.className = btn.className + ' is-copied';
        btn.innerHTML = 'скопировано';
        setTimeout(function () {
          btn.className = btn.className.replace(' is-copied', '');
          btn.innerHTML = def;
        }, 1500);
      }

      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(showToast, function () {
          fallbackCopy(text);
          showToast();
        });
      } else {
        fallbackCopy(text);
        showToast();
      }
    });
  }

  function fallbackCopy(text) {
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); } catch (e) {}
    document.body.removeChild(ta);
  }
})();
</script>
[/html][hideprofile]