/* ════════════════════════════════════════════════════════════
   РАДИО ВЛАДИВОСТОК · style.v4.css
   Организация повторяет блоки index.html.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   БЛОК 0 · BASE — токены, светлая тема, reset, сетка
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#050505;
  --bg-2:#0B0B0B;
  --graphite:#141414;
  --surface:#101010;
  --line:rgba(255,255,255,.07);
  --white:#F8F8F8;
  --grey:#A3A3A3;
  --grey-dim:#6E6E6E;
  --red:#E60023;
  --red-soft:rgba(230,0,35,.16);

  /* меняется JS по доминирующему цвету обложки */
  --ambient:#E60023;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,64px);
}

[data-theme="light"]{
  --bg:#FAF9F7;
  --bg-2:#FFFFFF;
  --graphite:#ECEAE6;
  --surface:#FFFFFF;
  --line:rgba(10,10,10,.09);
  --white:#141414;          /* основной текст */
  --grey:#5C5C5C;
  --grey-dim:#8A8A8A;
  --red:#D40021;            /* глубже для контраста на светлом */
  --red-soft:rgba(212,0,33,.1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .55s var(--ease), color .55s var(--ease);
}

.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.section{padding:0 0 clamp(64px,9vw,110px)}
.eyebrow{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-dim);
  margin:0 0 22px;font-weight:600;
}
.hidden{display:none !important}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ════════════════════════════════════════════════════════════
   БЛОК 2 · BACKGROUND
   ════════════════════════════════════════════════════════════ */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 8%, color-mix(in srgb, var(--ambient) 13%, transparent) 0%, transparent 70%),
    radial-gradient(45% 40% at 82% 72%, color-mix(in srgb, var(--ambient) 7%, transparent) 0%, transparent 72%),
    radial-gradient(50% 45% at 12% 88%, rgba(255,255,255,.025) 0%, transparent 70%);
  transition:background 1200ms var(--ease);
}
[data-theme="light"] .ambient{
  background:
    radial-gradient(60% 50% at 50% 8%, color-mix(in srgb, var(--ambient) 8%, transparent) 0%, transparent 70%),
    radial-gradient(45% 40% at 82% 72%, color-mix(in srgb, var(--ambient) 4%, transparent) 0%, transparent 72%);
}
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  transition:opacity .55s var(--ease);
}
[data-theme="light"] .grain{opacity:.05}

/* ════════════════════════════════════════════════════════════
   БЛОК 3 · THEME TOGGLE
   Тёмная тема → солнце. Светлая тема → месяц.
   ════════════════════════════════════════════════════════════ */
.theme-toggle{
  position:fixed;top:20px;right:20px;z-index:40;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:var(--grey);cursor:pointer;
  display:grid;place-items:center;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .4s var(--ease-out);
}
.theme-toggle:hover{color:var(--red);transform:scale(1.06);border-color:rgba(230,0,35,.5);background:var(--red-soft)}
.theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.theme-toggle svg{width:19px;height:19px;fill:currentColor;transition:transform .5s var(--ease-out)}
.theme-toggle.flip svg{transform:rotate(180deg) scale(.6);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.theme-toggle .ic-moon{display:none}
[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.7)}
[data-theme="light"] .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-moon{display:block}

/* ════════════════════════════════════════════════════════════
   БЛОК 4 · HERO
   ════════════════════════════════════════════════════════════ */
.hero{
  min-height:82svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:44px 0 28px;
}

.logo-mark{
  width:clamp(88px,13vw,118px);height:auto;
  color:var(--red);
  filter:drop-shadow(0 0 12px rgba(230,0,35,.42));
  animation:logoBreath 8s var(--ease) infinite, fadeUp .9s var(--ease-out) both;
}
@keyframes logoBreath{
  0%,100%{filter:drop-shadow(0 0 12px rgba(230,0,35,.42))}
  50%{filter:drop-shadow(0 0 20px rgba(230,0,35,.6))}
}
[data-theme="light"] .logo-mark{filter:drop-shadow(0 0 10px rgba(212,0,33,.26))}

.station-name{
  margin:26px 0 0;
  font-size:clamp(28px,5.2vw,52px);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  animation:fadeUp .9s var(--ease-out) .1s both;
}
.tagline{
  margin:4px 0 0;
  font-size:clamp(13px,1.6vw,15px);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:400;
  animation:fadeUp .9s var(--ease-out) .18s both;
}

/* Лампа ON AIR: три слоя свечения + стеклянная линза */
.onair{
  margin:30px 0 0;
  display:inline-flex;align-items:center;gap:13px;
  padding:11px 20px 11px 15px;
  border:1px solid var(--line);
  border-radius:100px;
  background:rgba(255,255,255,.022);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:fadeUp .9s var(--ease-out) .26s both;
  transition:background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
[data-theme="light"] .onair{background:rgba(255,255,255,.66)}
.lamp{position:relative;width:15px;height:15px;flex:0 0 auto}
.lamp span{position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.lamp .g1{width:46px;height:46px;background:radial-gradient(circle,rgba(230,0,35,.12) 0%,transparent 68%)}
.lamp .g2{width:27px;height:27px;background:radial-gradient(circle,rgba(230,0,35,.08) 0%,transparent 70%)}
/* Состояния лампы:
   покой (эфир доступен, плеер выключен) — тлеющая, приглушённая
   body.rv-playing — лампа горит, пульсирует; в тёмной теме капсула «включается» белым
   body.rv-offline — станция вне эфира, всё погашено */
.lamp .core{
  width:11px;height:11px;
  background:radial-gradient(circle at 34% 30%, #B33642 0%, #7E1420 55%, #4A0C13 100%);
  box-shadow:0 0 4px rgba(230,0,35,.3), inset 0 -1px 2px rgba(0,0,0,.5);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.lamp .g1,.lamp .g2{opacity:0;transition:opacity .5s var(--ease)}
.lamp .lens{
  width:11px;height:11px;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.62) 0%, transparent 44%);
}
body.rv-playing:not(.rv-offline) .lamp .core{
  background:radial-gradient(circle at 34% 30%, #FF5A6E 0%, #E60023 46%, #8E0016 100%);
  box-shadow:0 0 10px rgba(230,0,35,.9), inset 0 -1px 2px rgba(0,0,0,.5);
  animation:lampPulse 6s var(--ease) infinite;
}
body.rv-playing:not(.rv-offline) .lamp .g1,
body.rv-playing:not(.rv-offline) .lamp .g2{opacity:1;animation:lampPulse 6s var(--ease) infinite}
@keyframes lampPulse{0%,100%{opacity:1}50%{opacity:.94}}
body.rv-offline .lamp .core{background:#3A1116;box-shadow:none;animation:none}
body.rv-offline .lamp .g1,body.rv-offline .lamp .g2{opacity:0;animation:none}

/* Тёмная тема: капсула «включается» белым при воспроизведении */
html:not([data-theme="light"]) body.rv-playing:not(.rv-offline) .onair{
  background:#F4F2EE;
  border-color:rgba(255,255,255,.85);
  box-shadow:0 0 28px rgba(244,242,238,.14);
}
html:not([data-theme="light"]) body.rv-playing:not(.rv-offline) .onair-label{color:#141414}
html:not([data-theme="light"]) body.rv-playing:not(.rv-offline) .listeners{color:#4A4A4A}
html:not([data-theme="light"]) body.rv-playing:not(.rv-offline) .onair-sep{background:rgba(10,10,10,.16)}

.onair-label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;transition:color .5s var(--ease)}
.onair-sep{width:1px;height:12px;background:var(--line)}
.listeners{font-size:12px;color:var(--grey);letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}

/* Кнопка Play */
.play-zone{margin:34px 0 0;display:flex;flex-direction:column;align-items:center;gap:16px;animation:fadeUp .9s var(--ease-out) .34s both}
.play{
  position:relative;
  width:104px;height:104px;border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  color:var(--white);cursor:pointer;
  display:grid;place-items:center;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09);
}
[data-theme="light"] .play{
  background:rgba(255,255,255,.66);border-color:var(--line);
  box-shadow:0 10px 26px rgba(20,20,20,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.play:hover{
  transform:scale(1.02);
  background:rgba(230,0,35,.1);
  border-color:rgba(230,0,35,.42);
  box-shadow:0 0 34px rgba(230,0,35,.3), 0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="light"] .play:hover{background:rgba(212,0,33,.06);box-shadow:0 0 26px rgba(212,0,33,.16),0 10px 26px rgba(20,20,20,.10)}
.play:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.play svg{width:36px;height:36px;fill:currentColor}
.play .ic-pause{display:none}
.play.playing .ic-play{display:none}
.play.playing .ic-pause{display:block}
.play.playing{border-color:rgba(230,0,35,.4);box-shadow:0 0 44px rgba(230,0,35,.34),0 14px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09)}
/* пульс внешнего кольца в эфире — статусный сигнал */
.play.playing::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(230,0,35,.35);
  animation:ringPulse 3.2s var(--ease) infinite;
}
@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.06);opacity:.25}
}
.play.loading::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--red);
  animation:spin 1s linear infinite;
}
.play-hint{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim);transition:color .3s var(--ease)}

/* Эквалайзер: декоративный, ступенчатый delay */
.eq{display:flex;align-items:flex-end;gap:3px;height:18px;opacity:0;transition:opacity .5s var(--ease)}
.eq.on{opacity:1}
.eq i{width:2px;background:var(--red);border-radius:1px;height:4px;transform-origin:bottom}
.eq.on i{animation:eqBar 1.15s var(--ease) infinite}
.eq i:nth-child(1){animation-delay:0ms}
.eq i:nth-child(2){animation-delay:120ms}
.eq i:nth-child(3){animation-delay:240ms}
.eq i:nth-child(4){animation-delay:360ms}
.eq i:nth-child(5){animation-delay:480ms}
.eq i:nth-child(6){animation-delay:600ms}
.eq i:nth-child(7){animation-delay:720ms}
@keyframes eqBar{0%,100%{height:4px}50%{height:17px}}

/* Происхождение эфира */
.origin{
  margin:42px 0 0;
  display:flex;gap:0;justify-content:center;flex-wrap:wrap;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-dim);
  animation:fadeUp .9s var(--ease-out) .42s both;
}
.origin>div{padding:0 30px;border-left:1px solid var(--line)}
.origin>div:first-child{border-left:none}
.origin b{display:block;color:var(--grey);font-weight:500;margin-top:6px;letter-spacing:.18em}

/* ════════════════════════════════════════════════════════════
   БЛОК 5 · PLAYER (NOW PLAYING)
   ════════════════════════════════════════════════════════════ */
.np{
  display:grid;grid-template-columns:280px 1fr;gap:clamp(26px,4vw,44px);
  align-items:center;
  padding:clamp(30px,4vw,46px);
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:24px;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  transition:background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
[data-theme="light"] .np{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
  border-color:rgba(10,10,10,.13);
  box-shadow:0 34px 90px rgba(20,20,20,.11);
}

/* Обложка */
.art{
  position:relative;width:280px;height:280px;border-radius:20px;overflow:hidden;
  background:var(--graphite);
  box-shadow:0 20px 80px rgba(0,0,0,.45);
  flex:0 0 auto;
  transition:box-shadow .55s var(--ease);
}
[data-theme="light"] .art{box-shadow:0 16px 44px rgba(20,20,20,.15)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(145deg,#161616,#0C0C0C);
  transition:background .55s var(--ease);
}
[data-theme="light"] .art-fallback{background:linear-gradient(145deg,#F1EFEB,#E4E1DC)}
.art-fallback svg{width:64px;color:var(--red);opacity:.9}
.art-fallback span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-dim);text-align:center;line-height:1.7}

/* Метаданные + кросс-фейд смены трека */
.np-meta{min-width:0}
.fade{transition:opacity .25s var(--ease)}
.fade.out{opacity:0;transition-duration:.12s}
.artist{
  margin:0;font-size:clamp(13px,1.7vw,15px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:500;
}
.title{
  margin:10px 0 0;font-size:clamp(24px,3.4vw,38px);font-weight:600;line-height:1.18;letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.album{margin:10px 0 0;font-size:13px;color:var(--grey-dim);letter-spacing:.02em}

/* Звуковая волна: декоративная анимация состояния эфира, не FFT */
.wave-wrap{
  margin:24px 0 0;height:56px;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.wave-wrap canvas{width:100%;height:100%;display:block}

/* Прогресс: индикатор, не контрол */
.progress{margin:12px 0 0}
.bar{
  position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.09);
  overflow:hidden;transition:background .55s var(--ease);
}
[data-theme="light"] .bar{background:rgba(10,10,10,.1)}
.bar-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,var(--red),#FF4256);
  border-radius:2px;
  transition:width 1s linear;
}
.times{
  display:flex;justify-content:space-between;margin-top:11px;
  font-size:12px;color:var(--grey-dim);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

/* Панель управления */
.controls{margin:26px 0 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vol{display:flex;align-items:center;gap:11px}
.vol button{
  width:32px;height:32px;border:none;background:none;color:var(--grey);cursor:pointer;
  display:grid;place-items:center;border-radius:8px;transition:color .25s var(--ease),background .25s var(--ease);
}
.vol button:hover{color:var(--white);background:rgba(255,255,255,.05)}
.vol button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.vol svg{width:17px;height:17px;fill:currentColor}
.vol .ic-mute{display:none}
.vol.muted .ic-vol{display:none}
.vol.muted .ic-mute{display:block}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:96px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.13);cursor:pointer;outline:none;
  transition:background .55s var(--ease);
}
[data-theme="light"] input[type=range]{background:rgba(10,10,10,.14)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--white);
  box-shadow:0 0 0 0 rgba(230,0,35,.28);transition:box-shadow .25s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(230,0,35,.24)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--white)}
input[type=range]:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* Поделиться */
.share{display:flex;gap:6px;margin-left:auto}
.share a,.share button{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.024);color:var(--grey);cursor:pointer;
  display:grid;place-items:center;text-decoration:none;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease-out);
}
[data-theme="light"] .share a,[data-theme="light"] .share button{background:rgba(255,255,255,.6)}
.share a:hover,.share button:hover{color:var(--white);border-color:rgba(230,0,35,.4);background:rgba(230,0,35,.08);transform:scale(1.02)}
.share a:focus-visible,.share button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.share svg{width:15px;height:15px;fill:currentColor}

/* Далее: рендерится только при реальных данных */
.next{
  margin:24px 0 0;padding:16px 20px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.018);
  display:none;align-items:baseline;gap:14px;flex-wrap:wrap;
  transition:background .55s var(--ease),border-color .55s var(--ease);
}
[data-theme="light"] .next{background:rgba(255,255,255,.55)}
.next.show{display:flex;animation:fadeUp .5s var(--ease-out) both}
.next-lb{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-dim);font-weight:600}
.next-txt{font-size:14px;color:var(--grey)}
.next-txt b{color:var(--white);font-weight:500}

/* ════════════════════════════════════════════════════════════
   БЛОК 6 · HISTORY (RECENTLY PLAYED)
   ════════════════════════════════════════════════════════════ */
.rail{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.13) transparent;
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:2px}
.rail::-webkit-scrollbar-track{background:transparent}

/* Карточка тянется, деля свободную ширину контейнера поровну:
   6 карточек занимают всю строку без пустого правого угла.
   min-width держит читаемость, если карточек меньше шести. */
.card{
  flex:1 1 168px;min-width:150px;max-width:210px;scroll-snap-align:start;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.018);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .4s var(--ease-out);
}
[data-theme="light"] .card{background:rgba(255,255,255,.66)}
.card:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.032);transform:scale(1.02)}
[data-theme="light"] .card:hover{background:#FFFFFF;border-color:rgba(10,10,10,.16)}
.card-art{width:100%;aspect-ratio:1;background:var(--graphite);position:relative;overflow:hidden}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.card-art .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,#161616,#0C0C0C);transition:background .55s var(--ease)}
[data-theme="light"] .card-art .ph{background:linear-gradient(145deg,#F1EFEB,#E4E1DC)}
.card-art .ph svg{width:34px;color:var(--red);opacity:.55}
.card-body{padding:13px 14px 15px}
.card-artist{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);margin:0 0 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-title{font-size:13px;font-weight:500;margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.rail-empty{font-size:13px;color:var(--grey-dim);padding:22px 0}

/* ════════════════════════════════════════════════════════════
   БЛОК 7 · FOOTER
   ════════════════════════════════════════════════════════════ */
footer{
  border-top:1px solid var(--line);
  padding:44px 0 60px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.f-motto{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#C4C4C4;line-height:2}
[data-theme="light"] .f-motto{color:#3E3E3E}
[data-theme="light"] .f-right{color:#4A4A4A}
[data-theme="light"] .f-right a{color:#2E2E2E}
.f-right{font-size:11px;color:var(--grey);letter-spacing:.06em;text-align:right}
.f-right a{color:var(--grey);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.f-right a:hover{border-bottom-color:var(--grey)}

/* ════════════════════════════════════════════════════════════
   БЛОК 8 · SYSTEM — тост
   ════════════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,14px);
  padding:12px 22px;border-radius:100px;
  background:rgba(20,20,20,.94);border:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-size:13px;letter-spacing:.02em;
  opacity:0;pointer-events:none;z-index:50;
  transition:opacity .3s var(--ease),transform .45s var(--ease-out);
}
[data-theme="light"] .toast{background:rgba(255,255,255,.96);color:#141414;box-shadow:0 10px 40px rgba(20,20,20,.16)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ════════════════════════════════════════════════════════════
   АДАПТИВ
   ════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .np{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 20px 28px}
  .art{width:min(280px,78vw);height:min(280px,78vw)}
  .np-meta{width:100%}
  .controls{justify-content:center}
  .share{margin-left:0;width:100%;justify-content:center;margin-top:6px}
  .next{justify-content:center;text-align:center}
  footer{flex-direction:column;text-align:center}
  .f-right{text-align:center}
  .origin>div{padding:0 18px}
}
/* На узких экранах карточки перестают тянуться —
   возвращается горизонтальный скролл с фиксированной шириной. */
@media(max-width:760px){
  .card{flex:0 0 168px;max-width:none}
}
@media(max-width:400px){
  .card{flex:0 0 142px}
}