:root {
  font-size: clamp(14px, 0.9rem + 0.5vw, 18px);
  --layout-width: clamp(360px, 90vw, 960px);
  --section-spacing: clamp(16px, 3vw, 56px);
  --card-radius: clamp(16px, 3vw, 36px);
  --card-padding: clamp(16px, 2.5vw, 32px);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 6vw, 96px);
  background: linear-gradient(180deg, #050505 0%, #161616 40%, #2b2b2b 100%);
  color: #f1f1f1;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
  width: min(var(--layout-width), 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-spacing);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.button-like,
.link-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button-like:hover,
.link-card:hover {
  transform: translateY(-2px) scale(1.01);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

.section-title {
  margin: clamp(1px, 0.3vw, 3px) 0 clamp(2px, 0.4vw, -5px);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  font-weight: 700;
  color: #f5f5f5;
}



p {
  margin: 0;
  line-height: 1.6;
  color: #d4d4d4;
}

.panel {
  width: min(100%, clamp(320px, 85vw, 900px));
  padding: clamp(24px, 5vw, 72px);
  border-radius: clamp(18px, 5vw, 40px);
  background: linear-gradient(180deg, #090909 0%, #151515 55%, #242424 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: clamp(12px, 3vw, 28px);
  transition: transform 0.25s ease;
}

.panel:hover {
  transform: scale(1.02);
}

.profile {
  display: flex;
  align-items: center;          /* выравнивание по оси Y с аватаркой */
  justify-content: flex-start;
  gap: clamp(6px, 1.2vw, 12px);
}

.profile-heading{
  display: flex;
  flex-direction: column;       /* имя+алиас сверху, описание снизу */
  justify-content: center;      /* вертикально центр к аватарке */
  align-items: flex-start;
  gap: clamp(4px, 0.6vw, 8px);
}

.profile-title{
  display: inline-flex;
  align-items: baseline;        /* аккуратная линия для имени и алиаса */
  gap: clamp(4px, 0.8vw, 10px);
}

.profile-name{
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}

.profile-alias{
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.2rem);
  font-style: italic;
  color: #c9c9c9;
  line-height: 1.4;
}

.profile-description{
  margin: 0;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  line-height: 1.4;
  color: #bdbdbd;
}

.profile-avatar {
  width: clamp(60px, 11vw, 88px);
  height: clamp(60px, 11vw, 88px);
  border-radius: 25%;
  object-fit: cover;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.music-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vw, 24px);
}


.music-mobile-note{ display:none; }

body.is-phone .music-mobile-note{
  display:block;
}

body.is-phone .music-card{
  display:grid;
  place-items:center;
  min-height: clamp(140px, 32vw, 220px);
}

body.is-phone .music-card > :not(.music-mobile-note){
  display:none !important;
}

body.is-phone .music-card > .music-mobile-note{
  display:block !important;
  text-align:center;
  color:#d4d4d4;
  line-height:1.35;
  font-size:clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
  padding:16px;
}



.music-card {
  width: 100%;
  display: grid;
  grid-template-columns: clamp(120px, 28vw, 220px) 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: stretch;
  padding: clamp(18px, 3vw, 28px);
  border-radius: clamp(20px, 5vw, 32px);
  background: linear-gradient(180deg, rgba(24, 24, 24, 0.95) 0%, rgba(18, 18, 18, 0.85) 50%, rgba(12, 12, 12, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  position: relative;
}


.music-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: clamp(16px, 4vw, 24px);
  overflow: hidden;
  background: rgba(28, 28, 28, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.music-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.music-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(10px, 2vw, 18px);
  min-width: 0;
  align-items: flex-start;
}



.music-track {
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 600;
  color: #f5f5f5;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-track:hover {
  color: #1db954;
}

.music-artist {
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
  color: #c9c9c9;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-artist:hover {
  color: #f5f5f5;
}

.music-artist a,
.music-artist a:visited{
  color: inherit;
  text-decoration: none;
}

.music-artist a:hover{
  color: #1db954;
}

.music-progress {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: clamp(4px, 0.8vw, 10px);
}
.music-time-current,
.music-time-total {
  font-size: clamp(0.8rem, 0.7rem + 0.2vw, 0.95rem);
  color: #c9c9c9;
  user-select: none;
  min-width: 40px;
  text-align: center;
}
.music-progress-slider{
  --p: 0%;
  --progress-fill:#2a2a2a;
  --progress-rest:#ffffff;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  background:transparent;
  border-radius:999px;
  outline:none;
}
.music-progress-slider::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--progress-fill) 0%,var(--progress-fill) var(--p),var(--progress-rest) var(--p),var(--progress-rest) 100%);
}
.music-progress-slider::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--progress-fill) 0%,var(--progress-fill) var(--p),var(--progress-rest) var(--p),var(--progress-rest) 100%);
}
.music-progress-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#1db954;
  margin-top:-3px;
  cursor:pointer;
}
.music-progress-slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border:none;
  border-radius:50%;
  background:#1db954;
  cursor:pointer;
}
.music-progress-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
}
.music-progress-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
}

.music-controls {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: clamp(6px, 1vw, 12px);
}




.music-btn {
  width: clamp(36px, 6vw, 48px);
  height: clamp(36px, 6vw, 48px);
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 32, 32, 0.85);
  color: #fdfdfd;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.music-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  background: rgba(45, 45, 45, 0.95);
}

.music-btn:active {
  transform: translateY(0);
}

.music-btn-toggle {
  width: clamp(44px, 7vw, 56px);
  height: clamp(44px, 7vw, 56px);
  background: #1db954;
  color: #040404;
}

.music-btn-toggle.playing {
  background: rgba(32, 32, 32, 0.85);
  color: #fdfdfd;
}

.music-btn-toggle .icon-pause {
  display: none;
}

.music-btn-toggle.playing .icon-play {
  display: none;
}

.music-btn-toggle.playing .icon-pause {
  display: block;
}

.music-volume{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.music-volume-rail{position:relative;flex:0 0 clamp(110px,22vw,160px)}
.music-btn[data-action="volume"] .icon-vol-off{display:none}
.music-btn[data-action="volume"].muted .icon-vol-on{display:none}
.music-btn[data-action="volume"].muted .icon-vol-off{display:block}

.music-volume-slider{
  --p:30%;
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;background:transparent;border-radius:999px;outline:none
}
.music-volume-slider::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:linear-gradient(to right,#fff 0%,#fff var(--p),rgba(255,255,255,.25) var(--p),rgba(255,255,255,.25) 100%)
}
.music-volume-slider::-moz-range-track{
  height:8px;border-radius:999px;
  background:linear-gradient(to right,#fff 0%,#fff var(--p),rgba(255,255,255,.25) var(--p),rgba(255,255,255,.25) 100%)
}
.music-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;margin-top:-3px;cursor:pointer
}
.music-volume-slider::-moz-range-thumb{
  width:14px;height:14px;border:none;border-radius:50%;background:#fff;cursor:pointer
}




.music-block[data-state="loading"] .music-card {
  opacity: 0.5;
  pointer-events: none;
}

.music-block[data-state="error"] .music-card {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 600px) {
  .music-card{position:relative;}
  .music-icon-link{
    position:absolute;top:clamp(12px,2.5vw,20px);right:clamp(12px,2.5vw,20px);
    display:inline-flex;align-items:center;justify-content:center;
    width:clamp(40px,6vw,52px);height:clamp(40px,6vw,52px);
    border-radius:50%;background:rgba(20,20,20,0.9);
    box-shadow:0 12px 26px rgba(0,0,0,.45);transition:transform .2s, box-shadow .2s;
  }
  .music-icon-link:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.55);}
  .music-icon-link img{width:70%;height:70%;object-fit:contain;display:block;}


  .music-controls{display:flex;align-items:center;gap:clamp(10px,2vw,18px);width:100%}
  .music-controls .music-btn{flex:0 0 auto}
}

.music-block[data-playback="paused"] .music-status span {
  animation-play-state: paused;
  opacity: 0.3;
}

.music-block[data-playback="playing"] .music-status span {
  animation-play-state: running;
  opacity: 1;
}

.music-cover {
  position: relative;
}

.music-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(35, 35, 35, 0.7), rgba(75, 75, 75, 0.4), rgba(35, 35, 35, 0.7));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.music-block[data-state="loading"] .music-cover::after {
  opacity: 1;
  animation: musicSkeleton 1.2s linear infinite;
}

.music-block[data-state="loading"] .music-cover-image {
  opacity: 0;
}

.music-block[data-state="loading"] .music-track,
.music-block[data-state="loading"] .music-artist {
  color: transparent;
  background: linear-gradient(90deg, rgba(60, 60, 60, 0.1), rgba(140, 140, 140, 0.4), rgba(60, 60, 60, 0.1));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: musicSkeleton 1.2s linear infinite;
}

.music-block[data-state="loading"] .music-track {
  min-height: 1.4em;
}

.music-block[data-state="loading"] .music-artist {
  min-height: 1.1em;
  width: clamp(120px, 40%, 200px);
}

.music-block[data-state="loading"] .music-status {
  opacity: 0.2;
}

.music-block[data-state="ready"] .music-cover-image,
.music-block[data-state="ready"] .music-track,
.music-block[data-state="ready"] .music-artist {
  opacity: 1;
}

@keyframes musicSkeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.music-icon-link {
  position: absolute;
  top: clamp(12px, 2.5vw, 20px);
  right: clamp(12px, 2.5vw, 20px);
  display: inline-flex;
  width: clamp(40px, 6vw, 52px);
  height: clamp(40px, 6vw, 52px);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.9);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.music-icon-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

.music-card svg {
  pointer-events: none;
}

.app-loader{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  background: linear-gradient(180deg,#050505 0%,#161616 40%,#2b2b2b 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
.app-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.app-loader-inner{
  position: relative;
  width: clamp(96px, 18vw, 140px);
  height: clamp(96px, 18vw, 140px);
}
.app-avatar{
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.app-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.app-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.18);
  border-top-color: #ffffff;
  animation: appSpin 1s linear infinite;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
@keyframes appSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .app-ring{ animation-duration: 2.2s; }
}

.links-row{
  width:100%;
  display:flex;
  align-items:center;
  gap: clamp(10px, 1.5vw, 20px);
  margin-top: 0;
}

.link-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.link-icon:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  background: rgba(255,255,255,0.12);
}

.link-icon img{
  width: 65%;
  height: 65%;
  object-fit: contain;
  display: block;
}

.panel > .section-title + .links-row{
  margin-top: calc(-1 * clamp(12px, 3vw, 28px) + 4px);
}

.icon-white{ filter: brightness(0) invert(1); }