[html]

<div style="
max-width: 700px;
margin: auto;
font-family: 'Trebuchet MS', sans-serif;
color: #5f5f70;
">

<style>
.scroll {
  overflow-y: auto;
  max-height: 120px;
  padding-right: 6px;
}

.scroll::-webkit-scrollbar {
  width: 4px;
}

.scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  background: rgba(120,220,255,0.5);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,180,220,0.7);
}
</style>

<div style="
background: linear-gradient(135deg, rgba(255,235,245,0.9), rgba(255,245,250,0.7));
border-radius: 25px;
padding: 25px;
box-shadow: 0 0 35px rgba(255,180,220,0.25);
backdrop-filter: blur(8px);
">

<!-- TITLE -->
<div style="
font-size: 30px;
text-align: center;
color: rgba(120,220,255,0.9);
letter-spacing: 4px;
margin-bottom: 10px;
text-shadow: 0 0 12px rgba(120,220,255,0.6);
">
ON:AIR
</div>

<br>

<!-- DESC -->
<div style="
text-align: center;
font-size: 12px;
opacity: 0.8;
margin-bottom: 20px;
line-height: 1.6;
">
придержание внешностей на 3 дня ✦ продление возможно<br>
оставляй заявку через шаблон ниже
</div>

<div style="display: flex; gap: 15px; flex-wrap: wrap;">

<!-- BOYS -->
<div style="
flex: 1;
min-width: 200px;
background: rgba(255,255,255,0.55);
border-radius: 18px;
padding: 15px;
backdrop-filter: blur(6px);
box-shadow: 0 0 15px rgba(120,220,255,0.15);
">

<div style="
text-align: center;
color: rgba(120,220,255,0.9);
margin-bottom: 10px;
font-weight: 900;
letter-spacing: 2px;
font-size: 15px;
text-transform: uppercase;
text-shadow: 0 0 6px rgba(120,220,255,0.5);
">
BOYS
</div>

<div class="scroll" style="font-size: 13px; line-height: 1.6;">
✦ [solo] park jaebeom<br>
✦ [nct] lee jeno<br>
✦ [nct] na jaemin<br>
✦ ...<br>
✦ ...<br>
✦ ...
</div>

</div>

<!-- GIRLS -->
<div style="
flex: 1;
min-width: 200px;
background: rgba(255,255,255,0.55);
border-radius: 18px;
padding: 15px;
backdrop-filter: blur(6px);
box-shadow: 0 0 15px rgba(255,180,220,0.2);
">

<div style="
text-align: center;
color: rgba(255,150,200,0.9);
margin-bottom: 10px;
font-weight: 900;
letter-spacing: 2px;
font-size: 15px;
text-transform: uppercase;
text-shadow: 0 0 6px rgba(255,150,200,0.5);
">
GIRLS
</div>

<div class="scroll" style="font-size: 13px; line-height: 1.6;">
✦ свободно<br>
✦ ...<br>
✦ ...<br>
✦ ...
</div>

</div>

</div>

<!-- CODE TITLE -->
<div style="
margin-top: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
color: rgba(120,220,255,0.9);
text-shadow: 0 0 8px rgba(120,220,255,0.5);
">
КОД
</div>

<!-- CODE BLOCK -->
<div style="
margin-top: 20px;
background: rgba(255,255,255,0.5);
border-radius: 18px;
padding: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.6);
box-shadow: 0 0 20px rgba(255,180,220,0.2);
">

<div style="
text-align:center;
font-weight:bold;
letter-spacing:2px;
margin-bottom:10px;
color: rgba(120,220,255,0.9);
text-shadow: 0 0 8px rgba(120,220,255,0.4);
">
CODE GENERATOR
</div>

<div style="display:flex;flex-direction:column;gap:10px;">

<input id="type" placeholder="group | solo | actor/actress"
style="
padding:9px;
border-radius:12px;
border:none;
background: rgba(255,255,255,0.7);
color:#6a6a7a;
outline:none;
">

<input id="name" placeholder="name surname"
style="
padding:9px;
border-radius:12px;
border:none;
background: rgba(255,255,255,0.7);
color:#6a6a7a;
outline:none;
">

<input id="link" placeholder="ссылка_на_профиль"
style="
padding:9px;
border-radius:12px;
border:none;
background: rgba(255,255,255,0.7);
color:#6a6a7a;
outline:none;
">

</div>

<div style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">

<button onclick="copyCode(true)" style="
padding:10px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:bold;
color:#fff;
background: linear-gradient(135deg, rgba(120,220,255,0.8), rgba(255,180,220,0.7));
box-shadow: 0 0 12px rgba(120,220,255,0.5);
">
скопировать код
</button>

<button onclick="copyCode(false)" style="
padding:10px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:bold;
color:#fff;
background: linear-gradient(135deg, rgba(255,150,200,0.8), rgba(255,210,230,0.7));
box-shadow: 0 0 10px rgba(255,150,200,0.4);
">
без ссылки
</button>

</div>

<div id="result" style="
text-align:center;
margin-top:10px;
font-size:11px;
opacity:0.8;
color: rgba(120,220,255,0.9);
">
</div>

<textarea id="hiddenTextarea" style="position:absolute;left:-9999px;"></textarea>

</div>

<script>
function copyCode(withLink) {
    let type = document.getElementById("type").value || "type";
    let name = document.getElementById("name").value || "name";
    let link = document.getElementById("link").value || "";

    let code = "";

    if (withLink && link) {
        code = `✦ [${type}] <a href="${link}">${name}</a>`;
    } else {
        code = `✦ [${type}] ${name}`;
    }

    let textarea = document.getElementById("hiddenTextarea");
    textarea.value = code;
    textarea.select();
    document.execCommand("copy");

    let result = document.getElementById("result");
    result.innerText = "on air ✧ скопировано";

    setTimeout(() => {
        result.innerText = "";
    }, 1200);
}
</script>

[/html]

[html]

<div style="
max-width: 700px;
margin: auto;
font-family: 'Trebuchet MS', sans-serif;
color: #eee;
">

<style>
/* ===== CUSTOM SCROLLBAR ===== */
.scroll {
  overflow-y: auto;
  max-height: 120px;
  padding-right: 6px;
}

.scroll::-webkit-scrollbar {
  width: 3px;
}

.scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 247, 255, 0.25);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 247, 255, 0.5);
}
.equalizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 25px;
  margin-bottom: 10px;
}

.bar {
  width: 4px;
  height: 10px;
  background: #00f7ff;
  border-radius: 3px;
  animation: equalize 1s infinite ease-in-out;
}

.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.6s; }
.bar:nth-child(5) { animation-delay: 0.8s; }

@keyframes equalize {
  0%   { height: 5px; opacity: 0.5; }
  50%  { height: 25px; opacity: 1; }
  100% { height: 5px; opacity: 0.5; }
}
</style>

<div style="
background: linear-gradient(135deg, #1c1c1c, #2a0d2f);
border-radius: 20px;
padding: 25px;
box-shadow: 0 0 20px rgba(255, 60, 172, 0.25);
">

<!-- TITLE -->
<!-- TITLE -->
<div class="onair-title">
ON:AIR
</div>

<style>
.onair-title {
  font-size: 30px;
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 10px;
  color: rgba(120,220,255,0.9);
  text-shadow:
    0 0 8px rgba(120,220,255,0.6),
    0 0 18px rgba(120,220,255,0.4),
    0 0 30px rgba(120,220,255,0.25);
  animation: onairGlow 2.5s infinite ease-in-out;
}

/* мягкое "дыхание" */
@keyframes onairGlow {
  0% {
    opacity: 0.85;
    text-shadow:
      0 0 6px rgba(120,220,255,0.4),
      0 0 12px rgba(120,220,255,0.3);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 12px rgba(120,220,255,0.9),
      0 0 25px rgba(120,220,255,0.6),
      0 0 45px rgba(255,180,220,0.4);
  }
  100% {
    opacity: 0.85;
    text-shadow:
      0 0 6px rgba(120,220,255,0.4),
      0 0 12px rgba(120,220,255,0.3);
  }
}
</style>
<br>

<!-- DESC -->
<div style="
text-align: center;
font-size: 12px;
opacity: 0.85;
margin-bottom: 20px;
line-height: 1.5;
">
придержание внешностей на 3 дня ✦ продление возможно<br>
оставляй заявку через шаблон ниже
</div>

<div style="display: flex; gap: 15px; flex-wrap: wrap;">

<!-- BOYS -->
<div style="
flex: 1;
min-width: 200px;
background: rgba(255,255,255,0.08);
border-radius: 15px;
padding: 15px;
backdrop-filter: blur(3px);
">

<div style="
text-align: center;
color: #4fdcff;
margin-bottom: 10px;
font-weight: 900;
letter-spacing: 2px;
font-size: 16px;
text-transform: uppercase;
text-shadow: 0 0 6px #4fdcff;
">
BOYS
</div>

<div class="scroll" style="font-size: 13px; line-height: 1.6;">
★ [solo] park jaebeom<br>
★ [nct] lee jeno<br>
★ [nct] na jaemin<br>
★ ...<br>
★ ...<br>
★ ...
</div>

</div>

<!-- GIRLS -->
<div style="
flex: 1;
min-width: 200px;
background: rgba(255,255,255,0.08);
border-radius: 15px;
padding: 15px;
backdrop-filter: blur(3px);
">

<div style="
text-align: center;
color: #ff3cac;
margin-bottom: 10px;
font-weight: 900;
letter-spacing: 2px;
font-size: 16px;
text-transform: uppercase;
text-shadow: 0 0 6px #ff3cac;
">
GIRLS
</div>

<div class="scroll" style="font-size: 13px; line-height: 1.6;">
★ свободно<br>
★ ...<br>
★ ...<br>
★ ...
</div>

</div>

</div>

<!-- ICONS PANEL -->
<div style="
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 12px 15px;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.08);
">

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(120,220,255,0.7);
text-shadow: 0 0 6px rgba(120,220,255,0.4);
">
<div class="equalizer">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>

</div>
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:16px;
font-weight:bold;
color: #ff4d6d;
text-shadow: 0 0 6px rgba(255,80,100,0.6);
animation: liveBlink 1.5s infinite;
">
● LIVE
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(255,180,220,0.8);
text-shadow: 0 0 6px rgba(255,180,220,0.4);
">
🎤
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(200,200,255,0.8);
text-shadow: 0 0 6px rgba(200,200,255,0.4);
">
🎧
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(120,220,255,0.7);
text-shadow: 0 0 6px rgba(120,220,255,0.4);
">
🎚️
</div>

</div>

<style>
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
</style>

<!-- CODE TITLE -->

<!-- CODE BLOCK CENTER -->
<div style="
margin-top: 20px;
background: rgba(255,255,255,0.06);
border-radius: 15px;
padding: 3px;
backdrop-filter: blur(6px);
font-family: Trebuchet MS;
border: 1px solid rgba(255,255,255,0.08);
">

<!-- TITLE -->
<div style="
margin-top: 15px;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
color: #00f7ff;
text-shadow: 0 0 8px #00f7ff;
">
КОД
</div>
<br>

<!-- INPUTS -->
<div style="display:flex;flex-direction:column;gap:8px;">

<input id="type" placeholder="group | solo | actor/actress"
style="
padding:8px;
border-radius:10px;
border:none;
background: rgba(20,20,25,0.85);
color:#e6eef7;
outline:none;
">

<input id="name" placeholder="name surname"
style="
padding:8px;
border-radius:10px;
border:none;
background: rgba(20,20,25,0.85);
color:#e6eef7;
outline:none;
">

<input id="link" placeholder="ссылка_на_профиль"
style="
padding:8px;
border-radius:10px;
border:none;
background: rgba(20,20,25,0.85);
color:#e6eef7;
outline:none;
">

</div>

<!-- BUTTONS -->
<div style="display:flex;flex-direction:column;gap:8px;margin-top:10px;">

<button onclick="copyCode(true)" style="
padding:9px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:bold;
color: rgba(10,10,15,0.9);
background: rgba(79,220,255,0.35);
backdrop-filter: blur(4px);
">
скопировать код
</button>

<button onclick="copyCode(false)" style="
padding:9px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:bold;
color: rgba(10,10,15,0.9);
background: rgba(255,60,172,0.30);
backdrop-filter: blur(4px);
">
без ссылки
</button>

</div>

<!-- RESULT -->
<div id="result" style="
text-align:center;
margin-top:10px;
font-size:11px;
opacity:0.8;
color: rgba(210,240,255,0.85);
">
</div>

<textarea id="hiddenTextarea" style="position:absolute;left:-9999px;"></textarea>

</div>

<script>
function copyCode(withLink) {
    let type = document.getElementById("type").value || "type";
    let name = document.getElementById("name").value || "name";
    let link = document.getElementById("link").value || "";

    let code = "";

    if (withLink && link) {
        code = `[${type}] <a href="${link}">${name}</a>`;
    } else {
        code = ` [${type}] ${name}`;
    }

    let textarea = document.getElementById("hiddenTextarea");
    textarea.value = code;
    textarea.select();
    document.execCommand("copy");

    let result = document.getElementById("result");
    result.innerText = "скопировано, тупой ты ушлепан ✦";

    setTimeout(() => {
        result.innerText = "";
    }, 1200);
}
</script>

[/html]

[html]

<div style="
max-width: 700px;
margin: auto;
font-family: 'Trebuchet MS', sans-serif;
color: #eee;
">

<style>
/* ===== CUSTOM SCROLLBAR ===== */
.scroll {
  overflow-y: auto;
  max-height: 120px;
  padding-right: 6px;
}

.scroll::-webkit-scrollbar {
  width: 3px;
}

.scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 247, 255, 0.25);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 247, 255, 0.5);
}
.equalizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 25px;
  margin-bottom: 10px;
}

.bar {
  width: 4px;
  height: 10px;
  background: #00f7ff;
  border-radius: 3px;
  animation: equalize 1s infinite ease-in-out;
}

.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.6s; }
.bar:nth-child(5) { animation-delay: 0.8s; }

@keyframes equalize {
  0%   { height: 5px; opacity: 0.5; }
  50%  { height: 25px; opacity: 1; }
  100% { height: 5px; opacity: 0.5; }
}
</style>

<div style="
background: linear-gradient(135deg, #1c1c1c, #2a0d2f);
border-radius: 20px;
padding: 25px;
box-shadow: 0 0 20px rgba(255, 60, 172, 0.25);
">

<!-- TITLE -->
<!-- TITLE -->
<div class="onair-title">
ON:AIR
</div>

<style>
.onair-title {
  font-size: 30px;
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 10px;
  color: rgba(120,220,255,0.9);
  text-shadow:
    0 0 8px rgba(120,220,255,0.6),
    0 0 18px rgba(120,220,255,0.4),
    0 0 30px rgba(120,220,255,0.25);
  animation: onairGlow 2.5s infinite ease-in-out;
}

/* мягкое "дыхание" */
@keyframes onairGlow {
  0% {
    opacity: 0.85;
    text-shadow:
      0 0 6px rgba(120,220,255,0.4),
      0 0 12px rgba(120,220,255,0.3);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 12px rgba(120,220,255,0.9),
      0 0 25px rgba(120,220,255,0.6),
      0 0 45px rgba(255,180,220,0.4);
  }
  100% {
    opacity: 0.85;
    text-shadow:
      0 0 6px rgba(120,220,255,0.4),
      0 0 12px rgba(120,220,255,0.3);
  }
}
</style>
<br>

<!-- DESC -->
<div style="
text-align: center;
font-size: 12px;
opacity: 0.85;
margin-bottom: 20px;
line-height: 1.5;
">
придержание внешностей на 3 дня ✦ продление возможно<br>
оставляй заявку через шаблон ниже
</div>

<div style="display: flex; gap: 15px; flex-wrap: wrap;">

<!-- BOYS -->
<div style="
flex: 1;
min-width: 200px;
background: rgba(255,255,255,0.08);
border-radius: 15px;
padding: 15px;
backdrop-filter: blur(3px);
">

<div style="
text-align: center;
color: #4fdcff;
margin-bottom: 10px;
font-weight: 900;
letter-spacing: 2px;
font-size: 16px;
text-transform: uppercase;
text-shadow: 0 0 6px #4fdcff;
">
BOYS
</div>

<div class="scroll" style="font-size: 13px; line-height: 1.6;">
🎧 [solo] park jaebeom<br>
🎧 [nct] lee jeno<br>
🎧 [nct] na jaemin<br>
🎧 ...<br>
🎧 ...<br>
🎧 ...
</div>

</div>

<!-- GIRLS -->
<div style="
flex: 1;
min-width: 200px;
background: rgba(255,255,255,0.08);
border-radius: 15px;
padding: 15px;
backdrop-filter: blur(3px);
">

<div style="
text-align: center;
color: #ff3cac;
margin-bottom: 10px;
font-weight: 900;
letter-spacing: 2px;
font-size: 16px;
text-transform: uppercase;
text-shadow: 0 0 6px #ff3cac;
">
GIRLS
</div>

<div class="scroll" style="font-size: 13px; line-height: 1.6;">
🎧 свободно<br>
🎧 ...<br>
🎧 ...<br>
🎧 ...
</div>

</div>

</div>

<!-- ICONS PANEL -->
<div style="
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 12px 15px;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.08);
">

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(120,220,255,0.7);
text-shadow: 0 0 6px rgba(120,220,255,0.4);
">
<div class="equalizer">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>

</div>
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:16px;
font-weight:bold;
color: #ff4d6d;
text-shadow: 0 0 6px rgba(255,80,100,0.6);
animation: liveBlink 1.5s infinite;
">
● LIVE
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(255,180,220,0.8);
text-shadow: 0 0 6px rgba(255,180,220,0.4);
">
🎤
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(200,200,255,0.8);
text-shadow: 0 0 6px rgba(200,200,255,0.4);
">
🎧
</div>

<!-- ICON -->
<div style="
flex:1;
text-align:center;
font-size:18px;
color: rgba(120,220,255,0.7);
text-shadow: 0 0 6px rgba(120,220,255,0.4);
">
🎚️
</div>

</div>

<style>
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
</style>

<!-- CODE TITLE -->

<!-- CODE BLOCK CENTER -->
<div style="
margin-top: 20px;
background: rgba(255,255,255,0.06);
border-radius: 15px;
padding: 3px;
backdrop-filter: blur(6px);
font-family: Trebuchet MS;
border: 1px solid rgba(255,255,255,0.08);
">

<!-- TITLE -->
<div style="
margin-top: 15px;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
color: #00f7ff;
text-shadow: 0 0 8px #00f7ff;
">
КОД
</div>
<br>

<!-- INPUTS -->
<div style="display:flex;flex-direction:column;gap:8px;">

<input id="type" placeholder="group | solo | actor/actress"
style="
padding:8px;
border-radius:10px;
border:none;
background: rgba(20,20,25,0.85);
color:#e6eef7;
outline:none;
">

<input id="name" placeholder="name surname"
style="
padding:8px;
border-radius:10px;
border:none;
background: rgba(20,20,25,0.85);
color:#e6eef7;
outline:none;
">

<input id="link" placeholder="ссылка_на_профиль"
style="
padding:8px;
border-radius:10px;
border:none;
background: rgba(20,20,25,0.85);
color:#e6eef7;
outline:none;
">

</div>

<!-- BUTTONS -->
<div style="display:flex;flex-direction:column;gap:8px;margin-top:10px;">

<button onclick="copyCode(true)" style="
padding:9px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:bold;
color: rgba(10,10,15,0.9);
background: rgba(79,220,255,0.35);
backdrop-filter: blur(4px);
">
скопировать код
</button>

<button onclick="copyCode(false)" style="
padding:9px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:bold;
color: rgba(10,10,15,0.9);
background: rgba(255,60,172,0.30);
backdrop-filter: blur(4px);
">
без ссылки
</button>

</div>

<!-- RESULT -->
<div id="result" style="
text-align:center;
margin-top:10px;
font-size:11px;
opacity:0.8;
color: rgba(210,240,255,0.85);
">
</div>

<textarea id="hiddenTextarea" style="position:absolute;left:-9999px;"></textarea>

</div>

<script>
function copyCode(withLink) {
    let type = document.getElementById("type").value || "type";
    let name = document.getElementById("name").value || "name";
    let link = document.getElementById("link").value || "";

    let code = "";

    if (withLink && link) {
        code = `[${type}] <a href="${link}">${name}</a>`;
    } else {
        code = ` [${type}] ${name}`;
    }

    let textarea = document.getElementById("hiddenTextarea");
    textarea.value = code;
    textarea.select();
    document.execCommand("copy");

    let result = document.getElementById("result");
    result.innerText = "скопировано, тупой ты ушлепан ✦";

    setTimeout(() => {
        result.innerText = "";
    }, 1200);
}
</script>

[/html]

[html]

<div style="
max-width:100%;
width:100%;
margin:0 auto;
font-family:'Trebuchet MS',sans-serif;
color:#6a6a7a;
">

<style>
.scroll {
  overflow-y:auto;
  max-height:260px;
  padding-right:6px;
}

.scroll::-webkit-scrollbar {
  width:3px;
}
.scroll::-webkit-scrollbar-track {
  background:rgba(255,255,255,0.4);
  border-radius:10px;
}
.scroll::-webkit-scrollbar-thumb {
  background:rgba(120,1220,255,0.4);
  border-radius:10px;
}

/* ON AIR */
.onair-title {
  font-size:28px;
  text-align:center;
  letter-spacing:4px;
  margin-bottom:10px;
  color:#78dcff;
  text-shadow:0 0 10px rgba(120,220,255,0.6), 0 0 25px rgba(255,180,220,0.4);
  animation:onairGlow 2.5s infinite ease-in-out;
}

@keyframes onairGlow {
  0%,100% {opacity:0.85;}
  50% {opacity:1;}
}

/* LETTER BLOCK */
.letter-block {
  margin-bottom:10px;
  padding:8px;
  border-radius:10px;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.8);
}

.letter-title {
  font-size:11px;
  letter-spacing:2px;
  margin-bottom:5px;
  text-align:center;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(250,200,221,0.7);
  opacity:0.9;
}

.name-list {
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

/* MAIN GRID */
.main-grid {
  display:flex;
  gap:10px;
  align-items:stretch;
  width:100%;
}

/* BOYS / GIRLS */
.column {
  flex:1 1 0;
  min-width:220px;
  background:rgba(250,230,240,0.65);
  border-radius:15px;
  padding:15px;
}

/* CENTER */
.center-panel {
  width:50px;
  flex:0 0 50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:10px 2px;
}

/* equalizer */
.equalizer {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:30px;
}

.bar {
  width:4px;
  height:10px;
  background:linear-gradient(to top,#ffb4dc,#78dcff);
  border-radius:3px;
  animation:equalize 1s infinite ease-in-out;
}

.bar:nth-child(2){animation-delay:.2s;}
.bar:nth-child(3){animation-delay:.4s;}
.bar:nth-child(4){animation-delay:.6s;}

@keyframes equalize {
  0%{height:5px;opacity:.5;}
  50%{height:25px;opacity:1;}
  100%{height:5px;opacity:.5;}
}

.live {
  color:#ff6b8a;
  font-weight:bold;
  animation:liveBlink 1.5s infinite;
}

@keyframes liveBlink {
  0%,100%{opacity:1;}
  50%{opacity:.4;}
}
</style>

<div style="
background:linear-gradient(135deg,rgba(255,235,245,0.9),rgba(255,245,250,0.85));
border-radius:20px;
padding:25px;
box-shadow:0 0 25px rgba(255,180,220,0.25);
">

<div class="onair-title">ON:AIR</div>

<div style="
text-align:center;
font-size:12px;
opacity:0.8;
margin-bottom:20px;
line-height:1.6;
">
внешность считается занятой после принятия анкеты.<br>
о возможном освобождении желаемой внешности можно узнать в теме гостевой или в списках на удаление.<br>
для удобства поиска используйте ctrl + f<br>
актуальный список в гостевой.
</div>

<!-- MAIN GRID -->
<div class="main-grid">

<!-- BOYS -->
<div class="column">

<div style="
text-align:center;
color:#78dcff;
margin-bottom:10px;
font-weight:900;
letter-spacing:2px;
font-size:15px;
text-shadow:0 0 6px rgba(120,220,255,0.5);
">
BOYS
</div>

<div class="scroll">

<div class="letter-block">
  <div class="letter-title">🎤 A — B — C — D</div>
  <div class="name-list"> <b>actor</b> - Lee Minho<br> <b>actor</b> - Kim Woobin</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 E — F — G — H</div>
  <div class="name-list"> <b>EXO</b> - Park Chanyeol</div>
</div>

<div class="letter-block"><div class="letter-title">🎤 I — J — K — L</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 M — N — O — P</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 Q — R — S — T</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 U — V — W — X</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 Y — Z</div><div class="name-list">...</div></div>

</div>
</div>

<!-- CENTER -->
<div class="center-panel">

<div class="equalizer">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>

<div class="live">● LIVE</div>

<div>🎤</div>
<div>🎧</div>
<div>🎚️</div>

</div>

<!-- GIRLS -->
<div class="column">

<div style="
text-align:center;
color:#ff96c8;
margin-bottom:10px;
font-weight:900;
letter-spacing:2px;
font-size:15px;
text-shadow:0 0 6px rgba(255,150,200,0.5);
">
GIRLS
</div>

<div class="scroll">

<div class="letter-block">
  <div class="letter-title">🎤 A — B — C — D</div>
  <div class="name-list"> <b>actress</b> - Lee Bona<br> <b>actress</b> - Park Sinhyo</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 E — F — G — H</div>
  <div class="name-list"> <b>EVERGLOW</b> - ...</div>
</div>

<div class="letter-block"><div class="letter-title">🎤 I — J — K — L</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 M — N — O — P</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 Q — R — S — T</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 U — V — W — X</div><div class="name-list">...</div></div>
<div class="letter-block"><div class="letter-title">🎤 Y — Z</div><div class="name-list">...</div></div>

</div>
</div>

</div>
</div>
</div>

[/html]

[html]

<div style="
max-width:100%;
width:100%;
margin:0 auto;
font-family:'Trebuchet MS',sans-serif;
color:#5f5454;
">

<style>
.scroll {
  overflow-y:auto;
  max-height:260px;
  padding-right:6px;
}

.scroll::-webkit-scrollbar {
  width:3px;
}
.scroll::-webkit-scrollbar-track {
  background:rgba(220,210,210,0.3);
  border-radius:10px;
}
.scroll::-webkit-scrollbar-thumb {
  background:rgba(180,210,220,0.6);
  border-radius:10px;
}

/* ON AIR */
.onair-title {
  font-size:28px;
  text-align:center;
  letter-spacing:4px;
  margin-bottom:10px;
  color:#8ecfe0; /* темнее cyan */
  text-shadow:
    0 0 6px rgba(140,210,230,0.9),
    0 0 14px rgba(140,210,230,0.6),
    0 0 28px rgba(255,170,200,0.4);
  animation:onairGlow 2.5s infinite ease-in-out;
}

@keyframes onairGlow {
  0%,100% {opacity:0.85;}
  50% {opacity:1;}
}

/* LETTER BLOCK */
.letter-block {
  margin-bottom:10px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(6px);
  border:1px solid rgba(230,210,210,0.5);
}

.letter-title {
  font-size:11px;
  letter-spacing:2px;
  margin-bottom:6px;
  text-align:center;
  padding:5px 8px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,240,245,0.9), rgba(235,245,255,0.9));
  border:1px solid rgba(220,200,210,0.5);
  color:#a88c8c;
}

.name-list {
  font-size:11px;
  line-height:1.5;
  text-align:center;
  color:#6a5d5d;
}

/* MAIN GRID */
.main-grid {
  display:flex;
  gap:12px;
  align-items:stretch;
  width:100%;
}

/* BOYS / GIRLS */
.column {
  flex:1 1 0;
  min-width:220px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(8px);
  border-radius:18px;
  padding:15px;
  border:1px solid rgba(230,210,210,0.5);
}

/* CENTER */
.center-panel {
  width:50px;
  flex:0 0 50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:10px 2px;
}

/* equalizer */
.equalizer {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:30px;
}

.bar {
  width:4px;
  height:10px;
  background:linear-gradient(180deg, #aee6f5, #f6b7c8);
  border-radius:3px;
  box-shadow:
    0 0 6px rgba(180,230,255,0.8),
    0 0 10px rgba(255,180,210,0.5);
  animation:equalize 1s infinite ease-in-out;
}

.bar:nth-child(2){animation-delay:.2s;}
.bar:nth-child(3){animation-delay:.4s;}
.bar:nth-child(4){animation-delay:.6s;}

@keyframes equalize {
  0%{height:5px;opacity:.5;}
  50%{height:25px;opacity:1;}
  100%{height:5px;opacity:.5;}
}

.live {
  color:#f3a6b8;
  font-weight:bold;
  text-shadow:0 0 6px rgba(255,170,190,0.6);
  animation:liveBlink 1.5s infinite;
}

@keyframes liveBlink {
  0%,100%{opacity:1;}
  50%{opacity:.4;}
}
</style>

<div style="
background:linear-gradient(135deg,#f6eeee,#f3e6ea,#efe4f5);
border-radius:25px;
padding:25px;
box-shadow:0 0 30px rgba(255,200,220,0.4);
">

<div class="onair-title">ON:AIR</div>

<div style="
text-align:center;
font-size:10px;
opacity:0.9;
margin-bottom:20px;
line-height:1.6;
color:#7a6b6b;
">
внешность считается занятой после принятия анкеты.<br>
о возможном освобождении желаемой внешности можно узнать в теме гостевой или в списках на удаление.<br>
для удобства поиска используйте сочетание клавиш <u>ctrl + f </u><br>
актуальный список придержанных и выкупленных внешностей располагается в гостевой.
</div>

<!-- MAIN GRID -->
<div class="main-grid">

<!-- BOYS -->
<div class="column">

<div style="
text-align:center;
color:#9fddee;
margin-bottom:10px;
font-weight:900;
letter-spacing:2px;
font-size:15px;
text-shadow:0 0 6px rgba(180,230,255,0.7);
">
BOYS
</div>

<div class="scroll">

<div class="letter-block">
  <div class="letter-title">🎤 A — B — C — D</div>
  <div class="name-list"> <b>actor</b> - Lee Minho<br> <b>actor</b> - Kim Woobin</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 E — F — G — H</div>
  <div class="name-list"> <b>EXO</b> - Park Chanyeol </div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 I — J — K — L</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 M — N — O — P</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 Q — R — S — T</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 U — V — W — X</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 Y — Z</div>
  <div class="name-list"> ...</div>
</div>

</div>
</div>

<!-- CENTER -->
<div class="center-panel">

<div class="equalizer">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>

<div class="live">● LIVE</div>

<div style="color:#f6b7c8;">🎤</div>
<div style="color:#cfdfff;">🎧</div>
<div style="color:#bfefff;">🎚️</div>

</div>

<!-- GIRLS -->
<div class="column">

<div style="
text-align:center;
color:#f3a6b8;
margin-bottom:10px;
font-weight:900;
letter-spacing:2px;
font-size:15px;
text-shadow:0 0 6px rgba(255,180,200,0.6);
">
GIRLS
</div>

<div class="scroll">

<div class="letter-block">
  <div class="letter-title">🎤 A — B — C — D</div>
  <div class="name-list"> <b>actress</b> - Lee Bona<br> <b>actress</b> - Park Sinhyo </div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 E — F — G — H</div>
  <div class="name-list"> <b>EVERGLOW</b> - chto-to tam</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 I — J — K — L</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 M — N — O — P</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 Q — R — S — T</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 U — V — W — X</div>
  <div class="name-list"> ...</div>
</div>

<div class="letter-block">
  <div class="letter-title">🎤 Y — Z</div>
  <div class="name-list"> ...</div>
</div>

</div>
</div>

</div>
</div>
</div>

[/html]

[hideprofile][html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ежедневные награды | ON:AIR</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

.main-card {
    max-width: 650px;
    margin: auto;
    font-family: 'Trebuchet MS', sans-serif;
    color: #6a6a7a;
}

.onair-title {
    font-size: 30px;
    text-align: center;
    letter-spacing: 4px;
    color: rgba(120,220,255,0.9);
    text-shadow: 0 0 10px rgba(120,220,255,0.6), 0 0 20px rgba(120,220,255,0.4), 0 0 40px rgba(255,180,220,0.4);
    animation: onairGlow 2.5s infinite ease-in-out;
}

@keyframes onairGlow {
    0% { opacity: 0.85; }
    50% { opacity: 1; }
    100% { opacity: 0.85; }
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* сетка наград */
.rewards-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 25px 0;
}

.reward-cell {
    aspect-ratio: 1 / 1;
    background: transparent; /* Прозрачный фон */
    backdrop-filter: blur(4px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fffff;
    text-shadow: 0 0 4px rgba(0,0,0,0.3);
    border: 2px solid transparent; /* Прозрачная граница под градиент */
    position: relative;
    background-clip: padding-box; /* Фон не залезает на границу */
}

/* Градиентная граница через псевдоэлемент */
.reward-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px; /* Толщина градиентной границы */
    background: linear-gradient(135deg, rgba(120,220,255,0.8), rgba(255,180,220,0.7));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.reward-cell.locked {
    background: transparent
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    backdrop-filter: blur(2px);
}

.reward-cell.locked::before {
    background: linear-gradient(135deg, rgba(150,150,150,0.5), rgba(100,100,100,0.3));
}

.reward-cell.opened::before {
    background: linear-gradient(135deg, rgba(120,220,255,0.9), rgba(255,200,230,0.9));
    box-shadow: 0 0 12px rgba(120,220,255,0.5);
}

.reward-cell:hover:not(.opened) {
    transform: scale(1.02);
}

.reward-cell:hover:not(.opened)::before {
    background: linear-gradient(135deg, rgba(120,220,255,1), rgba(255,180,220,0.9));
}

.timer-block {
    text-align: center;
    font-size: 13px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 10px 15px;
    margin: 15px 0;
    color: #78dcff;
    font-weight: bold;
    letter-spacing: 1px;
}

.toast-notify {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    color: #ffb4dc;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    border: 1px solid rgba(255,180,220,0.4);
}

.toast-notify.show {
    opacity: 1;
}

/* иконки внизу */
.icons-row {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.45);
    border-radius: 15px;
    padding: 12px 15px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.6);
}
</style>
</head>
<body>

<div class="main-card">
    <div style="background: linear-gradient(135deg, rgba(255,235,245,0.9), rgba(255,245,250,0.85)); border-radius: 20px; padding: 25px; box-shadow: 0 0 25px rgba(255,180,220,0.25);">

        <!-- заголовок с эквалайзером слева и справа -->
        <div class="onair-header">
            <div class="onair-title">daily check-in</div>
         
            <div style="flex:1;text-align:right;font-size:16px;font-weight:bold;color:#ff6b8a;text-shadow:0 0 6px rgba(255,120,150,0.6);animation:liveBlink 1.5s infinite;">
                ● LIVE
            </div>
        </div>

       
        <!-- сетка наград -->
        <div class="rewards-grid" id="rewardsGrid"></div>

        <!-- таймер -->
        <div class="timer-block" id="timerDisplay">загрузка...</div>

        <!-- иконки внизу (LIVE без дубляжа эквалайзера) -->
        <div class="icons-row">
            <div style="flex:1;text-align:center;">🎤</div>
            <div style="flex:1;text-align:center;">🎧</div>
           
        </div>

    </div>
</div>

<div id="toast" class="toast-notify"></div>

<script>
const grid = document.getElementById("rewardsGrid");
const toast = document.getElementById("toast");
const timerDiv = document.getElementById("timerDisplay");

const rewards = [
    10,15,20,25,30,35,40,
    45,50,55,60,65,70,75,
    80,85,90,95,100,10,15,
    20,25,30,35,40,45,50,
    55,60,100
];

let currentDay = Number(localStorage.getItem("currentDay") || 0);
let opened = JSON.parse(localStorage.getItem("opened") || "[]");
let lastClaimDate = localStorage.getItem("lastClaimDate");

if (currentDay < 0) currentDay = 0;
if (currentDay > 31) currentDay = 31;

function today() {
    return new Date().toISOString().split("T")[0];
}

function showToast(text) {
    toast.textContent = text;
    toast.classList.add("show");
    setTimeout(() => toast.classList.remove("show"), 2000);
}

function copyReward(day, value) {
    const text = `${day}-${value}`;
    const 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");
        showToast(`Скопировано: ${text}`);
    } catch {
        showToast("Ошибка копирования ❌");
    }
    document.body.removeChild(ta);
}

function renderGrid() {
    grid.innerHTML = "";
   
    for (let i = 0; i < 31; i++) {
        const cell = document.createElement("div");
        cell.className = "reward-cell locked";
        cell.textContent = "🎵";

        if (opened[i]) {
            cell.classList.add("opened");
            cell.textContent = rewards[i];
        }

        cell.addEventListener("click", (function(index) {
            return function() {
                copyReward(index + 1, rewards[index]);

                if (opened[index]) {
                    showToast("Уже открыто ✔");
                    return;
                }

                if (index !== currentDay) {
                    showToast("Открывай по порядку 🔒");
                    return;
                }

                if (lastClaimDate === today()) {
                    showToast("Уже получено сегодня ⏳");
                    return;
                }

                opened[index] = true;
                currentDay++;

                localStorage.setItem("opened", JSON.stringify(opened));
                localStorage.setItem("currentDay", currentDay);
                localStorage.setItem("lastClaimDate", today());
                lastClaimDate = today();

                cell.classList.remove("locked");
                cell.classList.add("opened");
                cell.textContent = rewards[index];

                showToast("Награда скопирована 🎁");
            };
        })(i));

        grid.appendChild(cell);
    }
}

function updateTimer() {
    const now = new Date();
    const tomorrow = new Date();
    tomorrow.setHours(24, 0, 0, 0);
    const diff = tomorrow - now;
    const h = Math.floor(diff / 1000 / 60 / 60);
    const m = Math.floor(diff / 1000 / 60) % 60;
    const s = Math.floor(diff / 1000) % 60;
    timerDiv.textContent = `⏱️ Следующая награда через: ${h}ч ${m}м ${s}с ⏱️`;
}

renderGrid();
setInterval(updateTimer, 1000);
updateTimer();
</script>

</body>
</html>[/html]

[hideprofile][html]
<div style="max-width:900px;margin:auto;font-family:'Trebuchet MS',sans-serif;color:#eee;">

  <div style="background:linear-gradient(135deg,#1b1b1b,#2b1033);border-radius:25px;overflow:hidden;box-shadow:0 0 25px rgba(255,60,172,0.18);">

    <!-- TOP -->
    <div style="
      height:45px;
      background:rgba(255,255,255,0.05);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 20px;
      letter-spacing:2px;
      font-weight:bold;
      color:#00f7ff;
      font-size:15px;
    ">
      <div style="animation:pulseGlow 1.8s infinite;text-shadow:0 0 8px #00f7ff;">
        ON:AIR
      </div>

      <div style="
        font-size:11px;
        letter-spacing:3px;
        color:rgba(255,255,255,0.55);
        text-transform:uppercase;
        animation:softFade 3s infinite;
      ">
        weekly broadcast ✦ live update
      </div>
    </div>

    <!-- BANNER -->
    <div style="
      height:200px;
      background:linear-gradient(135deg,rgba(0,247,255,0.15),rgba(255,60,172,0.18),rgba(255,255,255,0.03));
      position:relative;
      overflow:hidden;
    ">
      <div style="
        position:absolute;
        top:30px;
        left:40px;
        font-size:70px;
        color:rgba(255,255,255,0.03);
        font-weight:900;
        letter-spacing:8px;
      ">
        ON:AIR
      </div>
    </div>

    <!-- MAIN -->
    <div style="display:flex;gap:20px;padding:12px 20px 20px 20px;margin-top:-80px;flex-wrap:wrap;">

      <!-- LEFT HOST (NARROWED) -->
    <div style="width:200px;">
  <div style="
    background:rgba(255,255,255,0.08);
    border-radius:22px;
    padding:15px;
    padding-top:60px;
    position:relative;
    backdrop-filter:blur(6px);
    min-height:360px;
  ">

    <!-- AVATAR -->
    <div style="
      width:95px;height:95px;border-radius:100%;
      border:4px solid #00f7ff;
      overflow:hidden;
      position:absolute;
      top:-45px;
      left:50%;
      transform:translateX(-50%);
      box-shadow:0 0 15px rgba(0,247,255,0.5);
    ">
      <img src="http://upforme.ru/uploads/001c/b5/80/2/t246289.png"
      style="width:100%;height:100%;object-fit:cover;">
    </div>

    <!-- NAME -->
    <div style="text-align:center;margin-top:8px;font-size:16px;font-weight:bold;">
      DJ ЧАНБИНИО
    </div>

    <!-- INFO -->
    <div style="margin-top:10px;font-size:11px;line-height:1.6;opacity:0.8;text-align:center;">
      ведущий эфира<br>weekly update ✦ 07.04
    </div>

    <!-- LIVE + EQ -->
    <div style="
      margin-top:12px;
      display:flex;
      justify-content:center;
      gap:10px;
      align-items:center;
    ">

      <div style="
        display:flex;
        align-items:center;
        gap:6px;
        padding:4px 10px;
        border-radius:20px;
        background:rgba(255,60,172,0.15);
        color:#ff3cac;
        font-size:10px;
        letter-spacing:1px;
        animation:pulseGlow 1.5s infinite;
      ">
        ● LIVE
      </div>

      <div style="display:flex;gap:2px;align-items:flex-end;">
        <div style="width:3px;height:6px;background:#00f7ff;animation:eq1 0.8s infinite;"></div>
        <div style="width:3px;height:12px;background:#00f7ff;animation:eq2 1s infinite;"></div>
        <div style="width:3px;height:8px;background:#00f7ff;animation:eq3 0.7s infinite;"></div>
        <div style="width:3px;height:14px;background:#00f7ff;animation:eq2 1.1s infinite;"></div>
        <div style="width:3px;height:7px;background:#00f7ff;animation:eq1 0.9s infinite;"></div>
      </div>

    </div>

    <!-- 🎧 AUDIO PLAYER -->
    <div style="
      margin-top:80px;
      width:100%;
      background:rgba(255,255,255,0.04);
      border-radius:12px;
      padding:8px;
      box-sizing:border-box;
      overflow:hidden;
    ">

      <div class="mini-audio" data-audio="http://forumstatic.ru/files/001c/b5/80/56082.mp3"
        style="display:flex;align-items:center;gap:10px;width:100%;">

        <button class="play-btn" style="
          width:32px;
          height:32px;
          border-radius:10px;
          border:none;
          background:rgba(0,247,255,0.2);
          color:#00f7ff;
          cursor:pointer;
          flex-shrink:0;
        ">▶</button>

        <div class="track-info" style="
          flex:1;
          min-width:0;
          display:flex;
          flex-direction:column;
          gap:4px;
        ">

        <div class="track-title" style="
  font-size:10px;
  color:#fff;

  width:100%;
  box-sizing:border-box;

  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;

  text-align:left;
  letter-spacing:0.2px;
  line-height:1.2;
">
  честно спизжено у хонджуна
</div>

          <input type="range" class="seek" value="0" min="0" step="0.01" style="
  width:90px;
  accent-color:#00f7ff;
">

          <div class="time" style="
            font-size:10px;
            color:rgba(255,255,255,0.6);
          ">
            0:00 / 2:49
          </div>

        </div>

      </div>

    </div>

  </div>
</div>

      <!-- RIGHT SIDE (WIDER FEEL) -->
      <div style="flex:1;min-width:340px;display:flex;flex-direction:column;gap:15px;">

        <!-- LINKS -->
        <div style="display:flex;gap:10px;overflow-x:auto;padding:10px;background:rgba(255,255,255,0.04);border-radius:15px;">
          <a href="ссылка" style="white-space:nowrap;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,0.03);font-size:12px;color:#fff;text-decoration:none;">КОНКЕРС</a>
          <a href="ссылка" style="white-space:nowrap;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,0.03);font-size:12px;color:#fff;text-decoration:none;">ВАЙБЫ</a>
          <a href="ссылка" style="white-space:nowrap;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,0.03);font-size:12px;color:#fff;text-decoration:none;">ИВЕНТ</a>
          <a href="ссылка" style="white-space:nowrap;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,0.03);font-size:12px;color:#fff;text-decoration:none;">ОБНОВА</a>
        </div>

        <!-- NEWS TITLE -->
        <div style="
          font-size:18px;
          font-weight:bold;
          color:#00f7ff;
          margin-bottom:8px;
          letter-spacing:1px;
        ">
          weekly news
        </div>

        <!-- NEWS BODY -->
        <div style="
          background:rgba(255,255,255,0.04);
          border-radius:15px;
          padding:12px;
          max-height:180px;
          overflow-y:auto;

          white-space:pre-wrap;
          word-break:break-word;

          font-size:13px;
          line-height:1.8;
          opacity:0.88;

          text-align:justify;
          text-justify:inter-word;
        ">
всем привет, добро пожаловать на нашу новую волну!
из нового только то, что нихуя не получается у меня, но вроде что-то вырисовывается.

остаёмся с нами — и у вас тоже нихуя не получится.
спасибо, что слушали наш эфир!

        </div>

        <!-- SOCIAL BLOCKS -->
        <div style="display:flex;flex-direction:column;gap:12px;align-items:center;">

<!-- ACTIVISTS / POSTEPISTS -->

<!-- STYLE -->
<style>
.avatar-block {
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}

/* аватарки */
.avatar-block a img {
  width:40px;
  height:40px;
  border-radius:100%;
  object-fit:cover;

  filter: sepia(1)
          saturate(0.9)
          hue-rotate(280deg)
          brightness(0.78)
          contrast(1.05);

  box-shadow:0 0 6px rgba(60,0,80,0.45);
  transition:0.25s ease;
}

.avatar-block a img:hover {
  transform:scale(1.08);
  box-shadow:0 0 10px rgba(90,0,120,0.6);
}

/* общая сетка */
.bottom-wrap {
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  margin-top:10px;
}

.bottom-row {
  display:flex;
  justify-content:space-between;
  width:100%;
  gap:20px;
}

.bottom-col {
  width:48%;
  text-align:center;
}

.bottom-title {
  font-size:12px;
  font-weight:bold;
  letter-spacing:1px;
  margin-bottom:8px;
}
</style>

<!-- WRAPPER -->
<div class="bottom-wrap">

  <!-- ROW 1 -->
  <div class="bottom-row">

    <!-- ACTIVISTS -->
    <div class="bottom-col">
      <div class="bottom-title" style="color:#00f7ff;">ACTIVISTS</div>
      <div class="avatar-block">
        <a href="https://player.rusff.me/profile.php?id=209">
          <img src="https://upforme.ru/uploads/001c/6a/04/234/t878342.jpg">
        </a>
        <a href="https://player.rusff.me/profile.php?id=348">
          <img src="https://upforme.ru/uploads/001c/6a/04/234/t465554.jpg">
        </a>
        <a href="https://player.rusff.me/profile.php?id=255">
          <img src="https://upforme.ru/uploads/001c/6a/04/234/t645627.jpg">
        </a>
      </div>
    </div>

    <!-- POSTEPISTS -->
    <div class="bottom-col">
      <div class="bottom-title" style="color:#ff3cac;">POSTEPISTS</div>
      <div class="avatar-block">
        <a href="https://player.rusff.me/profile.php?id=194">
          <img src="https://upforme.ru/uploads/001c/6a/04/234/t672119.jpg">
        </a>
        <a href="https://player.rusff.me/profile.php?id=29">
          <img src="https://upforme.ru/uploads/001c/6a/04/234/t270263.jpg">
        </a>
        <a href="https://player.rusff.me/profile.php?id=266">
          <img src="https://upforme.ru/uploads/001c/6a/04/234/t743771.jpg">
        </a>
      </div>
    </div>

  </div>

  <!-- ROW 2 -->
  <div class="bottom-row">

    <!-- PAIR -->
    <div class="bottom-col">
      <div class="bottom-title" style="color:#ffb6df;">PAIR</div>
      <div style="font-size:11px;">
        ♥ Yagi Yusei & Boss Chaikamon
      </div>
    </div>

    <!-- EPISODE -->
    <div class="bottom-col">
      <div class="bottom-title" style="color:#00f7ff;">EPISODE</div>
      <div style="font-size:11px;">
        ~ slow down ~
      </div>
    </div>

  </div>

</div>

          <!-- WEEK POST -->
          <div style="
            background:rgba(255,255,255,0.03);
            padding:10px 12px;
            border-radius:12px;
            font-size:11px;
            line-height:1.6;
            width:calc(100% + 20px);
            margin-left:-20px;
            box-sizing:border-box;
            text-align:left;
          ">
            Сильно затянутый галстук и верхняя пуговица рубашки давят на шею... 
            <a href="https://player.rusff.me/viewtopic.php?id=1313#p299498"
               style="color:#00f7ff;text-decoration:none;">
              Читать далее...
            </a>
          </div>

        </div>

      </div>

    </div>

  </div>
</div>

<style>
@keyframes pulseGlow {
  0%{opacity:0.6;text-shadow:0 0 5px #00f7ff;}
  50%{opacity:1;text-shadow:0 0 18px #00f7ff;}
  100%{opacity:0.6;text-shadow:0 0 5px #00f7ff;}
}

@keyframes softFade {
  0%{opacity:0.4;}
  50%{opacity:0.9;}
  100%{opacity:0.4;}
}

@keyframes eq1 {
  0%,100%{height:6px;opacity:0.6;}
  50%{height:14px;opacity:1;}
}

@keyframes eq2 {
  0%,100%{height:10px;opacity:0.6;}
  50%{height:18px;opacity:1;}
}

@keyframes eq3 {
  0%,100%{height:8px;opacity:0.6;}
  50%{height:16px;opacity:1;}
}

div::-webkit-scrollbar {
  width:6px;
}

div::-webkit-scrollbar-thumb {
  background:rgba(0,247,255,0.4);
  border-radius:10px;
}
</style>
[/html]

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ежедневные награды | ON:AIR</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(145deg, #05060a 0%, #0b1020 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

.main-card {
    max-width: 650px;
    margin: auto;
    color: #b8c7d9;
}

/* TITLE */
.onair-title {
    font-size: 30px;
    text-align: center;
    letter-spacing: 4px;
    color: rgba(0, 255, 255, 0.85);
    text-shadow: 0 0 10px rgba(0,255,255,0.5),
                 0 0 20px rgba(255,0,200,0.25),
                 0 0 40px rgba(0,255,255,0.2);
    animation: onairGlow 2.5s infinite ease-in-out;
}

@keyframes onairGlow {
    0% { opacity: 0.75; }
    50% { opacity: 1; }
    100% { opacity: 0.75; }
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* GRID */
.rewards-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 25px 0;
}

.reward-cell {
    aspect-ratio: 1 / 1;
    background: rgba(10, 14, 25, 0.4);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #00f5ff;
    text-shadow: 0 0 6px rgba(0,255,255,0.3);
    position: relative;
}

/* NEON BORDER */
.reward-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(0,255,255,0.7), rgba(255,0,200,0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.reward-cell.locked {
    background: rgba(5, 8, 15, 0.35);
    color: rgba(180, 200, 220, 0.35);
}

.reward-cell.locked::before {
    background: linear-gradient(135deg, rgba(120,120,120,0.25), rgba(60,60,60,0.15));
}

.reward-cell.opened::before {
    background: linear-gradient(135deg, rgba(0,255,255,0.9), rgba(255,0,200,0.7));
    box-shadow: 0 0 14px rgba(0,255,255,0.35);
}

.reward-cell:hover:not(.opened) {
    transform: scale(1.03);
}

.reward-cell:hover:not(.opened)::before {
    background: linear-gradient(135deg, rgba(0,255,255,1), rgba(255,0,200,0.8));
}

/* TIMER */
.timer-block {
    text-align: center;
    font-size: 13px;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 10px 15px;
    margin: 15px 0;
    color: #00f5ff;
    font-weight: bold;
    border: 1px solid rgba(0,255,255,0.2);
}

/* TOAST */
.toast-notify {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    color: #ff4fd8;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    border: 1px solid rgba(255,0,200,0.4);
}

.toast-notify.show {
    opacity: 1;
}

/* ICONS */
.icons-row {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.35);
    border-radius: 15px;
    padding: 12px 15px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,255,255,0.15);
}

</style>
</head>

<body>

<div class="main-card">
    <div style="background: linear-gradient(135deg, rgba(10,12,20,0.9), rgba(5,6,12,0.85)); border-radius: 20px; padding: 25px; box-shadow: 0 0 25px rgba(0,255,255,0.08);">

        <div class="onair-header">
            <div class="onair-title">daily check-in</div>

            <div style="flex:1;text-align:right;font-size:16px;font-weight:bold;color:#ff4fd8;text-shadow:0 0 6px rgba(255,0,200,0.5);animation:liveBlink 1.5s infinite;">
                ● LIVE
            </div>
        </div>

        <div class="rewards-grid" id="rewardsGrid"></div>

        <div class="timer-block" id="timerDisplay">загрузка...</div>

        <div class="icons-row">
            <div style="flex:1;text-align:center;">🎤</div>
            <div style="flex:1;text-align:center;">🎧</div>
        </div>

    </div>
</div>

<div id="toast" class="toast-notify"></div>

<script>
// JS НЕ МЕНЯЛСЯ
const grid = document.getElementById("rewardsGrid");
const toast = document.getElementById("toast");
const timerDiv = document.getElementById("timerDisplay");

const rewards = [
    10,15,20,25,30,35,40,
    45,50,55,60,65,70,75,
    80,85,90,95,100,10,15,
    20,25,30,35,40,45,50,
    55,60,100
];

const profileId = window.location.pathname || "default_profile";

const STORAGE_KEYS = {
    currentDay: `currentDay_${profileId}`,
    opened: `opened_${profileId}`,
    lastClaimDate: `lastClaimDate_${profileId}`
};

let currentDay = Number(localStorage.getItem(STORAGE_KEYS.currentDay) || 0);
let opened = JSON.parse(localStorage.getItem(STORAGE_KEYS.opened) || "[]");
let lastClaimDate = localStorage.getItem(STORAGE_KEYS.lastClaimDate);

function today() {
    return new Date().toISOString().split("T")[0];
}

function showToast(text) {
    toast.textContent = text;
    toast.classList.add("show");
    setTimeout(() => toast.classList.remove("show"), 2000);
}

function copyReward(day, value) {
    const text = `${day}-${value}`;
    const ta = document.createElement("textarea");
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
    showToast(`Скопировано: ${text}`);
}

function renderGrid() {
    grid.innerHTML = "";

    for (let i = 0; i < 31; i++) {
        const cell = document.createElement("div");
        cell.className = "reward-cell locked";
        cell.textContent = "🎵";

        if (opened[i]) {
            cell.classList.add("opened");
            cell.textContent = rewards[i];
        }

        cell.addEventListener("click", function () {

            copyReward(i + 1, rewards[i]);

            if (opened[i]) return showToast("Уже открыто ✔");
            if (i !== currentDay) return showToast("Открывай по порядку 🔒");
            if (lastClaimDate === today()) return showToast("Уже получено сегодня ⏳");

            opened[i] = true;
            currentDay++;

            localStorage.setItem(STORAGE_KEYS.opened, JSON.stringify(opened));
            localStorage.setItem(STORAGE_KEYS.currentDay, currentDay);
            localStorage.setItem(STORAGE_KEYS.lastClaimDate, today());

            cell.classList.remove("locked");
            cell.classList.add("opened");
            cell.textContent = rewards[i];

            showToast("Награда скопирована 🎁");
        });

        grid.appendChild(cell);
    }
}

function updateTimer() {
    const now = new Date();
    const tomorrow = new Date();
    tomorrow.setHours(24, 0, 0, 0);
    const diff = tomorrow - now;

    const h = Math.floor(diff / 1000 / 60 / 60);
    const m = Math.floor(diff / 1000 / 60) % 60;
    const s = Math.floor(diff / 1000) % 60;

    timerDiv.textContent = `⏱️ Следующая награда через: ${h}ч ${m}м ${s}с ⏱️`;
}

renderGrid();
setInterval(updateTimer, 1000);
updateTimer();
</script>

</body>
</html>

[/html]