[hideprofile][html]
<div class="oa-guest">
  <div class="oa-guest-card">

    <!-- 01. ШАПКА: можно менять три строки текста. Цвета обложки — в начале CSS. -->
    <div class="oa-guest-top">
      <div>
        <span>ON:AIR / GUEST DESK</span>
        <h2>гостевая</h2>
        <em>придержать внешность / задать вопрос / найти своих</em>
      </div>
      <div class="oa-guest-badge">
        <b>✳</b>
        <span>face claim check</span>
      </div>
    </div>

    <div class="oa-guest-body">
      <!-- 02. ЛЕВЫЙ ЭФИРНЫЙ БЛОК: подписи, теги и текст меняются здесь. -->
      <div class="oa-guest-machine"><div class="oa-guest-display">
        <div class="oa-guest-live"><i></i><b>GUEST ON AIR</b></div>
        <div class="oa-guest-title">
          <span>welcome room</span>
          <b>гостевая</b>
          <em>зашёл — придержал эфир</em>
        </div>
        <div class="oa-guest-equalizer"><i></i><i></i><i></i><i></i><i></i></div>
        <div class="oa-guest-tags"><span>reserve</span><span>claim</span><span>code</span><span>help</span></div>
        <div class="oa-guest-caption">appearance reservation desk</div>
      </div></div>

      <!-- 03. ПРАВАЯ ПАНЕЛЬ: правила / списки / генератор. -->
      <div class="oa-guest-panel">
        <div class="oa-guest-info">
          <h3>привет!</h3>
          <!-- ПРИВЕТСТВИЕ И ПРАВИЛА — редактировать здесь. -->
          <p>Ты находишься в гостевой <b>ON:AIR</b> — здесь можно задать вопрос, найти соигроков,
             уточнить занятость внешности и придержать понравившийся фейс до регистрации.</p>
          <p>Внешность держится <b>3 дня</b> с возможностью продления ещё на <b>2 дня</b>.
             Для придержания заполни форму ниже или оставь код в теме вручную.</p>
        </div>

        <div class="oa-guest-main">
          <div class="oa-guest-lists">
            <!-- 04. СПИСОК BOYS: редактировать содержимое .oa-claim-text. -->
            <div class="oa-claim-box">
              <h4>boys</h4>
              <div class="oa-claim-text">
                <b>★ за амс</b><br>
                [solo] — park jaebeom<br>
                [nct] — lee jeno<br>
                [nct] — na jaemin<br>
                [zb1] — park gunwook<br><br>
                <b>★ до 27.05</b><br>
                [actor] — имя фамилия<br>
                [solo] — имя фамилия
              </div>
            </div>
            <!-- 05. СПИСОК GIRLS: редактировать содержимое .oa-claim-text. -->
            <div class="oa-claim-box">
              <h4>girls</h4>
              <div class="oa-claim-text">
                <b>★ за амс</b><br>
                [actress] — lee ji-eun<br><br>
                <b>★ до 27.05</b><br>
                [kep1er] — shen xiaoting<br>
                [solo] — имя фамилия
              </div>
            </div>
          </div>

          <!-- 06. ГЕНЕРАТОР: placeholder можно менять; ID полей и кнопок НЕ МЕНЯТЬ. -->
          <div class="oa-guest-form code-generator">
            <div class="notification" id="result" role="status" aria-live="polite"></div>
            <div class="oa-guest-form-title">
              <b>код придержания</b>
              <span>заполни поля и скопируй готовый шаблон</span>
            </div>
            <div class="input-fields oa-guest-fields">
              <input type="text" id="type" placeholder="group | solo | actor/actress" aria-label="Группа или тип">
              <input type="text" id="name" placeholder="name surname" aria-label="Имя и фамилия">
              <input type="text" id="link" placeholder="ссылка_на_профиль" aria-label="Ссылка на профиль">
            </div>
            <div class="oa-guest-buttons">
              <button type="button" id="copyButton">скопировать код</button>
              <button type="button" id="copyWithoutLinkButton">скопировать без ссылки</button>
            </div>
            <div class="oa-guest-status">готовый код скопируется по нажатию на кнопку</div>
            <textarea id="hiddenTextarea" aria-hidden="true" tabindex="-1"></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="oa-guest-foot"><span>ON:AIR / GUEST FREQUENCY</span><span>KEEP YOUR FREQUENCY ALIVE</span></div>
  </div>
</div>
<style>
/* ===================================================================
   ON:AIR / ГОСТЕВАЯ — стиль личной страницы
   БЛОК 01. ОСНОВНЫЕ ЦВЕТА. ИЗМЕНЯЙ HEX-КОДЫ ЗДЕСЬ.
   Все настройки ограничены .oa-guest и не меняют оформление Rusff.
   =================================================================== */
.oa-guest {
  --outer-dark: #10162c;       /* ВНЕШНЯЯ ТЁМНАЯ РАМКА */
  --outer-blue: #1e2b55;       /* ВТОРОЙ ЦВЕТ ВНЕШНЕЙ РАМКИ */
  --cover-left: #233e79;       /* ШАПКА: СЛЕВА */
  --cover-mid: #466eb7;        /* ШАПКА: ПОСЕРЕДИНЕ */
  --cover-right: #1d2b57;      /* ШАПКА: СПРАВА */
  --panel-bg: #f8f9ff;         /* БОЛЬШАЯ СВЕТЛАЯ КАРТОЧКА */
  --shelf-bg: #eff2fa;         /* ФОН СПИСКОВ BOYS / GIRLS И ФОРМЫ */
  --card-white: #ffffff;       /* ФОН ВВОДНЫХ КАРТОЧЕК И ПОЛЕЙ */
  --ink: #202941;              /* ОСНОВНОЙ ТЕКСТ */
  --muted: #7787a6;            /* ДОПОЛНИТЕЛЬНЫЙ ТЕКСТ */
  --accent: #466abb;           /* СИНИЙ АКЦЕНТ, КНОПКИ */
  --light-accent: #9beaf4;     /* ГОЛУБОЙ АКЦЕНТ */
  --lilac: #b7a6e8;           /* СИРЕНЕВЫЙ В ДЕКОРЕ */
  --scroll: #9caed2;          /* СКРОЛЛ СПИСКОВ */
  box-sizing: border-box;
  position: relative;
  width: 100%; max-width: 900px;
  margin: 14px auto; padding: 16px;
  background: radial-gradient(ellipse at 9% 4%,rgba(83,115,198,.25),transparent 43%),
              linear-gradient(145deg,var(--outer-dark),var(--outer-blue));
  border: 1px solid rgba(155,203,250,.26);
  border-radius: 23px;
  box-shadow: 0 16px 38px rgba(12,23,54,.20);
  color: #fff;
  font: 12px/1.45 'Trebuchet MS',Arial,sans-serif;
  overflow: hidden;
}
.oa-guest *, .oa-guest *::before, .oa-guest *::after { box-sizing: border-box; }
.oa-guest h2, .oa-guest h3, .oa-guest h4, .oa-guest p { margin: 0; }
.oa-guest::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -180px; right: -170px; width: 320px; height: 430px;
  border: 1px solid rgba(163,195,244,.16); border-radius: 45% 55% 60% 40%;
  transform: rotate(-23deg);
  box-shadow: 0 0 0 40px rgba(163,195,244,.025), 0 0 0 90px rgba(163,195,244,.018);
}

/* ===================================================================
   БЛОК 02. СИНЯЯ ОБЛОЖКА / ЗАГОЛОВОК ГОСТЕВОЙ
   Для смены цвета обложки менять --cover-left/mid/right выше.
   =================================================================== */
.oa-guest .oa-guest-top {
  position: relative; z-index: 1;
  min-height: 134px; padding: 17px 21px 38px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 15px;
  overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(ellipse at 80% 0%,rgba(159,218,255,.26),transparent 44%),
              linear-gradient(117deg,var(--cover-left),var(--cover-mid) 53%,var(--cover-right));
}
.oa-guest .oa-guest-top::before {
  content: ''; position: absolute; pointer-events: none;
  width: 360px; height: 172px; left: 29%; top: -63px;
  border-radius: 35% 65% 60% 40%/45% 40% 60% 55%;
  background: rgba(112,145,221,.35); transform: rotate(-12deg);
}
.oa-guest .oa-guest-top::after {
  content: 'ON AIR'; position: absolute; right: 16px; bottom: -31px;
  color: rgba(255,255,255,.12); font-size: 92px; font-weight: 900;
  letter-spacing: -7px; white-space: nowrap; line-height: 1; pointer-events: none;
}
.oa-guest .oa-guest-top > * { position: relative; z-index: 1; }
.oa-guest .oa-guest-top span {
  display: block; color: #cae7ff; font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
}
.oa-guest .oa-guest-top h2 {
  margin: 5px 0 6px; color: #fff; font-size: 30px;
  line-height: 1; font-weight: 900; letter-spacing: -.8px; text-transform: uppercase;
}
.oa-guest .oa-guest-top em {
  display: block; color: #e6efff; font-size: 10px; font-style: normal;
  text-transform: uppercase; letter-spacing: .7px;
}
.oa-guest .oa-guest-badge {
  min-width: 118px; padding: 9px 12px; text-align: right;
  border-radius: 12px; border: 1px solid rgba(234,249,255,.3);
  background: rgba(17,40,88,.25);
}
.oa-guest .oa-guest-badge b { display: block; color: var(--light-accent); font-size: 24px; line-height: 1; }
.oa-guest .oa-guest-badge span { margin-top: 4px; color: #e4f5ff; font-size: 9px; letter-spacing: .6px; }

/* ===================================================================
   БЛОК 03. ОСНОВНАЯ СЕТКА: СЛЕВА ЭФИР / СПРАВА ГОСТЕВАЯ
   Поменять 218px для изменения ширины левой колонки.
   =================================================================== */
.oa-guest .oa-guest-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 218px minmax(0,1fr);
  gap: 12px; align-items: stretch; margin: -21px 10px 0;
}
.oa-guest .oa-guest-machine {
  min-width: 0; padding: 7px; border-radius: 17px;
  background: linear-gradient(150deg,#17254b,#294e88);
  border: 1px solid rgba(178,209,255,.24);
  box-shadow: 0 9px 19px rgba(9,20,54,.21);
}
.oa-guest .oa-guest-display {
  position: relative; min-height: 100%; padding: 15px 13px;
  border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 100% 0%,rgba(156,214,255,.18),transparent 40%),
              radial-gradient(circle at 0% 90%,rgba(169,151,221,.13),transparent 40%),
              linear-gradient(145deg,#1b2d54,#1d3b6b);
  border: 1px solid rgba(214,235,255,.12);
}
.oa-guest .oa-guest-display::after {
  content: ''; position: absolute; width: 190px; height: 190px;
  bottom: -83px; right: -96px; border: 1px solid rgba(220,240,255,.14);
  border-radius: 50%; box-shadow: 0 0 0 26px rgba(220,240,255,.035); pointer-events: none;
}
.oa-guest .oa-guest-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; color: #dff8ff;
  border: 1px solid rgba(155,234,244,.26); border-radius: 20px;
  background: rgba(13,32,69,.45); font-size: 9px; letter-spacing: 1px;
}
.oa-guest .oa-guest-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--light-accent); box-shadow: 0 0 8px rgba(137,228,247,.8); }
.oa-guest .oa-guest-title { margin-top: 35px; }
.oa-guest .oa-guest-title span { font-size: 9px; color: #adcaf0; text-transform: uppercase; letter-spacing: 2px; }
.oa-guest .oa-guest-title b { display: block; margin: 5px 0 8px; font-size: 25px; line-height: 1.05; font-weight: 900; color: #fff; }
.oa-guest .oa-guest-title em { display: block; font-size: 11px; color: #d5e6fb; font-style: normal; }
.oa-guest .oa-guest-equalizer {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 7px; height: 53px; margin-top: 30px;
}
.oa-guest .oa-guest-equalizer i { width: 8px; border-radius: 8px; background: linear-gradient(180deg,var(--light-accent),#6d8dd1); }
.oa-guest .oa-guest-equalizer i:nth-child(1) { height: 18px; }
.oa-guest .oa-guest-equalizer i:nth-child(2) { height: 36px; }
.oa-guest .oa-guest-equalizer i:nth-child(3) { height: 26px; }
.oa-guest .oa-guest-equalizer i:nth-child(4) { height: 49px; }
.oa-guest .oa-guest-equalizer i:nth-child(5) { height: 22px; }
.oa-guest .oa-guest-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.oa-guest .oa-guest-tags span { padding: 4px 7px; background: rgba(160,190,238,.13); border: 1px solid rgba(190,219,255,.15); border-radius: 20px; color: #dceafd; font-size: 9px; letter-spacing: .5px; }
.oa-guest .oa-guest-caption {
  margin-top: 17px; padding: 9px; border: 1px solid rgba(201,232,255,.13);
  border-radius: 10px; background: rgba(255,255,255,.04);
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: #a9c9ef; text-align: center;
}

/* ===================================================================
   БЛОК 04. ПРАВАЯ СВЕТЛАЯ ПАНЕЛЬ / ПРИВЕТСТВИЕ
   =================================================================== */
.oa-guest .oa-guest-panel {
  min-width: 0; padding: 12px;
  background: var(--panel-bg); color: var(--ink);
  border: 1px solid rgba(255,255,255,.95); border-radius: 17px;
  box-shadow: 0 9px 22px rgba(7,20,53,.2);
}
.oa-guest .oa-guest-info {
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid #edf1fa; border-radius: 12px;
  background: var(--card-white);
}
.oa-guest .oa-guest-info h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 18px; font-weight: 900; text-transform: lowercase; }
.oa-guest .oa-guest-info h3::before { content: '\2733'; color: var(--accent); font-size: 15px; font-weight: normal; }
.oa-guest .oa-guest-info p { margin: 0 0 5px; font-size: 11px; line-height: 1.5; color: #667796; }
.oa-guest .oa-guest-info p:last-child { margin-bottom: 0; }
.oa-guest .oa-guest-info b { color: #304e90; }
.oa-guest .oa-guest-main { display: grid; gap: 10px; }
.oa-guest .oa-guest-lists { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }

/* ===================================================================
   БЛОК 05. СПИСКИ BOYS / GIRLS. СОДЕРЖИМОЕ ПРОКРУЧИВАЕТСЯ.
   =================================================================== */
.oa-guest .oa-claim-box {
  min-width: 0; padding: 10px 11px;
  border-radius: 12px; border: 1px solid #e1e7f5;
  background: var(--shelf-bg);
}
.oa-guest .oa-claim-box h4 {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid #d9e2f2;
  font-size: 12px; font-weight: 900; text-transform: uppercase;
  color: #273b69; letter-spacing: .7px;
}
.oa-guest .oa-claim-box h4::before { content: '\2733'; color: var(--accent); font-size: 13px; font-weight: normal; }
.oa-guest .oa-claim-text {
  height: 146px; padding-right: 5px;
  overflow: auto; overflow-x: hidden;
  font: 10.5px/1.5 'Trebuchet MS',Arial,sans-serif;
  color: #40516f; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
.oa-guest .oa-claim-text::-webkit-scrollbar { width: 5px; }
.oa-guest .oa-claim-text::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 7px; }
.oa-guest .oa-claim-text b { color: #315c9e; }

/* ===================================================================
   БЛОК 06. ГЕНЕРАТОР КОДА — ПОЛЯ И КНОПКИ
   ID type/name/link/copyButton/copyWithoutLinkButton НЕ МЕНЯТЬ.
   =================================================================== */
.oa-guest .oa-guest-form {
  position: relative; min-width: 0; padding: 12px;
  background: var(--shelf-bg); border: 1px solid #e1e7f5;
  border-radius: 12px;
}
.oa-guest .oa-guest-form-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.oa-guest .oa-guest-form-title b { font-size: 14px; font-weight: 900; color: #24365b; }
.oa-guest .oa-guest-form-title span { max-width: 220px; color: var(--muted); font-size: 9px; text-align: right; }
.oa-guest .oa-guest-fields { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 7px; margin-bottom: 8px; }
.oa-guest .oa-guest-form input {
  width: 100%; min-width: 0; padding: 9px 10px;
  color: var(--ink); background: var(--card-white);
  border: 1px solid #cedbf0; border-radius: 9px;
  font: 10.5px 'Trebuchet MS',Arial,sans-serif;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.oa-guest .oa-guest-form input::placeholder { color: #8496b4; opacity: 1; }
.oa-guest .oa-guest-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(70,106,187,.13); }
.oa-guest .oa-guest-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.oa-guest .oa-guest-buttons button {
  padding: 9px 8px; border: 0; border-radius: 9px;
  background: linear-gradient(120deg,#2c4988,var(--accent));
  color: #fff; cursor: pointer; font: bold 10px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing: .2px;
}
.oa-guest .oa-guest-buttons button:last-child { color: #2a477b; border: 1px solid #c9d7ed; background: #fff; }
.oa-guest .oa-guest-buttons button:hover { filter: brightness(1.09); }
.oa-guest .oa-guest-buttons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oa-guest .oa-guest-status { margin-top: 7px; font-size: 9px; color: var(--muted); text-align: center; }
.oa-guest .notification {
  position: fixed; z-index: 99999; left: 50%; bottom: 22px;
  transform: translate(-50%,12px); opacity: 0; visibility: hidden;
  padding: 10px 15px; color: #fff; background: #233762;
  border: 1px solid rgba(165,209,247,.35); border-radius: 12px;
  box-shadow: 0 9px 20px rgba(5,16,45,.24);
  font-size: 11px; transition: opacity .15s,transform .15s;
  pointer-events: none;
}
.oa-guest .notification.show { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.oa-guest #hiddenTextarea {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; z-index: -1;
}
.oa-guest .oa-guest-foot { margin: 10px 10px 0; display: flex; justify-content: space-between; color: var(--light-accent); font-size: 8px; letter-spacing: 1.2px; opacity: .8; text-transform: uppercase; }

/* ===================================================================
   БЛОК 07. АДАПТАЦИЯ ДЛЯ НЕБОЛЬШИХ ЭКРАНОВ
   =================================================================== */
@media (max-width: 790px) {
  .oa-guest .oa-guest-body { grid-template-columns: 180px minmax(0,1fr); }
  .oa-guest .oa-guest-machine { padding: 5px; }
  .oa-guest .oa-guest-display { padding: 13px 10px; }
  .oa-guest .oa-guest-form-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .oa-guest .oa-guest-form-title span { text-align: left; max-width: none; }
  .oa-guest .oa-guest-fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .oa-guest { padding: 10px; border-radius: 17px; }
  .oa-guest .oa-guest-top { padding: 15px 15px 30px; min-height: 116px; }
  .oa-guest .oa-guest-top h2 { font-size: 26px; }
  .oa-guest .oa-guest-top em { font-size: 9px; }
  .oa-guest .oa-guest-badge { min-width: 88px; padding: 8px; }
  .oa-guest .oa-guest-body { grid-template-columns: 1fr; margin: -18px 4px 0; gap: 10px; }
  .oa-guest .oa-guest-display { min-height: 160px; }
  .oa-guest .oa-guest-title { margin-top: 13px; }
  .oa-guest .oa-guest-equalizer { position: absolute; right: 16px; top: 42px; margin: 0; gap: 5px; }
  .oa-guest .oa-guest-tags { margin-top: 11px; }
  .oa-guest .oa-guest-caption { display: none; }
  .oa-guest .oa-guest-panel { padding: 10px; }
  .oa-guest .oa-guest-fields { grid-template-columns: 1fr; }
}
@media (max-width: 410px) {
  .oa-guest .oa-guest-lists { grid-template-columns: 1fr; }
  .oa-guest .oa-claim-text { height: 110px; }
  .oa-guest .oa-guest-top::after { font-size: 65px; bottom: -20px; }
  .oa-guest .oa-guest-badge { display: none; }
  .oa-guest .oa-guest-buttons { grid-template-columns: 1fr; }
  .oa-guest .oa-guest-top em { letter-spacing: 0; }
}
</style>
<script>
/* ON:AIR — ГЕНЕРАТОР ПРИДЕРЖАНИЙ. Изменения оформления его не затрагивают. */
(function () {
  var guest = document.querySelector('.oa-guest');
  if (!guest) return;
  var type = guest.querySelector('#type');
  var name = guest.querySelector('#name');
  var link = guest.querySelector('#link');
  var notice = guest.querySelector('#result');
  var textarea = guest.querySelector('#hiddenTextarea');
  var timer;

  function showNotice(message) {
    notice.textContent = message;
    notice.classList.add('show');
    clearTimeout(timer);
    timer = setTimeout(function () { notice.classList.remove('show'); }, 2100);
  }

  function fallbackCopy(value) {
    var x = window.pageXOffset, y = window.pageYOffset;
    textarea.value = value;
    try { textarea.focus({ preventScroll: true }); }
    catch (e) { textarea.focus(); }
    textarea.select();
    textarea.setSelectionRange(0, value.length);
    var done = false;
    try { done = document.execCommand('copy'); } catch (e) {}
    window.scrollTo(x, y);
    return done;
  }

  function copy(value) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(value).then(function () {
        showNotice('✓ код скопирован');
      }).catch(function () {
        showNotice(fallbackCopy(value) ? '✓ код скопирован' : 'Не удалось скопировать код');
      });
    } else {
      showNotice(fallbackCopy(value) ? '✓ код скопирован' : 'Не удалось скопировать код');
    }
  }

  guest.querySelector('#copyButton').addEventListener('click', function () {
    var t = type.value.trim(), n = name.value.trim(), l = link.value.trim();
    if (!t || !n || !l) { showNotice('Заполните все три поля!'); return; }
    copy('[' + t + '] - <a href="' + l + '">' + n + '</a><br>');
  });

  guest.querySelector('#copyWithoutLinkButton').addEventListener('click', function () {
    var t = type.value.trim(), n = name.value.trim();
    if (!t || !n) { showNotice('Заполните тип и имя!'); return; }
    copy('[' + t + '] - ' + n + '<br>');
  });
})();
</script>
[/html]
[/hideprofile]