/* =========================================================
   FIMIPLAY
   Main Home / Social Listening Interface
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

  --bg:
    #001326;

  --bg-deep:
    #000b17;

  --panel:
    #021d36;

  --panel-soft:
    #032744;

  --panel-light:
    #06375d;

  --blue:
    #079cff;

  --blue-bright:
    #00baff;

  --cyan:
    #14e6f4;

  --cyan-soft:
    #75f5ff;

  --purple:
    #8c21ff;

  --pink:
    #ff1493;

  --pink-bright:
    #ff36cf;

  --green:
    #2fe48c;

  --white:
    #ffffff;

  --text:
    #f7fbff;

  --muted:
    #a9c9df;

  --border:
    rgba(
      20,
      185,
      255,
      0.55
    );

  --border-soft:
    rgba(
      20,
      185,
      255,
      0.25
    );

  --shadow-blue:
    0 0 22px
    rgba(
      0,
      183,
      255,
      0.35
    );

  --shadow-pink:
    0 0 24px
    rgba(
      255,
      20,
      180,
      0.24
    );

}


/* =========================================================
   RESET
   ========================================================= */

* {

  box-sizing:
    border-box;

}


html {

  margin:
    0;

  padding:
    0;

  min-height:
    100%;

  background:
    var(--bg-deep);

}


body {

  margin:
    0;

  padding:
    0;

  min-height:
    100vh;

  color:
    var(--text);

  background:

    radial-gradient(
      circle at 50% -10%,
      rgba(
        0,
        116,
        200,
        0.26
      ),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #00162b 0%,
      #00101f 65%,
      #000b16 100%
    );

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  overflow-x:
    hidden;

}


button,
input,
select {

  font:
    inherit;

}


button {

  -webkit-tap-highlight-color:
    transparent;

}


button,
a {

  touch-action:
    manipulation;

}


/* =========================================================
   APP
   ========================================================= */

.fimiplay-app {

  width:
    min(
      100%,
      1540px
    );

  margin:
    0 auto;

  padding:
    0 28px 125px;

}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {

  min-height:
    94px;

  display:
    grid;

  grid-template-columns:
    120px 1fr 220px;

  align-items:
    center;

  gap:
    20px;

}


.header-icon {

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    54px;

  height:
    54px;

  padding:
    0;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  cursor:
    pointer;

}


/* =========================================================
   HAMBURGER
   ========================================================= */

.menu-button {

  flex-direction:
    column;

  gap:
    7px;

}


.menu-button span {

  display:
    block;

  width:
    39px;

  height:
    4px;

  border-radius:
    10px;

  background:
    var(--white);

}


/* =========================================================
   BRAND
   ========================================================= */

.fimiplay-brand {

  justify-self:
    center;

  display:
    flex;

  align-items:
    center;

  gap:
    17px;

  color:
    var(--white);

  text-decoration:
    none;

}


.brand-name {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

}


.brand-name strong {

  font-size:
    clamp(
      34px,
      4vw,
      55px
    );

  line-height:
    0.9;

  letter-spacing:
    1px;

  font-weight:
    850;

}


.brand-name strong span {

  color:
    var(--cyan);

}


.brand-name small {

  margin-top:
    12px;

  font-size:
    14px;

  letter-spacing:
    7px;

  color:
    #ffffff;

}


/* =========================================================
   BRAND RADIO WAVES
   ========================================================= */

.brand-radio-waves {

  position:
    relative;

  width:
    70px;

  height:
    56px;

}


.brand-radio-waves .wave {

  position:
    absolute;

  left:
    50%;

  border:
    7px solid
    var(--cyan);

  border-left-color:
    transparent;

  border-right-color:
    transparent;

  border-bottom-color:
    transparent;

  border-radius:
    50%;

  transform:
    translateX(-50%);

}


.brand-radio-waves .wave-one {

  top:
    0;

  width:
    70px;

  height:
    70px;

}


.brand-radio-waves .wave-two {

  top:
    13px;

  width:
    48px;

  height:
    48px;

}


.brand-radio-waves .wave-three {

  top:
    25px;

  width:
    27px;

  height:
    27px;

}


.brand-radio-waves i {

  position:
    absolute;

  bottom:
    0;

  left:
    50%;

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    var(--cyan);

  transform:
    translateX(-50%);

}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {

  justify-self:
    end;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.favorite-button {

  font-size:
    47px;

  font-weight:
    200;

}


.notification-button {

  font-size:
    31px;

}


.notification-dot {

  position:
    absolute;

  top:
    4px;

  right:
    5px;

  width:
    16px;

  height:
    16px;

  border-radius:
    50%;

  background:
    var(--pink);

  box-shadow:
    0 0 10px
    var(--pink);

}


.profile-avatar {

  width:
    55px;

  height:
    55px;

  border:
    2px solid
    var(--cyan);

  border-radius:
    50%;

  color:
    var(--white);

  background:

    linear-gradient(
      135deg,
      #166fbd,
      #06365e
    );

  box-shadow:
    0 0 16px
    rgba(
      0,
      214,
      255,
      0.45
    );

  cursor:
    pointer;

}


.profile-avatar span {

  font-weight:
    800;

}


/* =========================================================
   SEARCH
   ========================================================= */

.search-section {

  width:
    100%;

}


.search-bar {

  min-height:
    64px;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  padding:
    0 24px;

  border:
    1px solid
    var(--blue);

  border-radius:
    36px;

  background:
    rgba(
      2,
      31,
      58,
      0.86
    );

}


.search-icon {

  flex:
    0 0 auto;

  margin-right:
    14px;

  color:
    var(--white);

  font-size:
    42px;

  line-height:
    1;

}


.search-bar input {

  flex:
    1;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    20px;

}


.search-bar input::placeholder {

  color:
    #e0e9f1;

  opacity:
    0.95;

}


.filter-button {

  width:
    50px;

  height:
    50px;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    30px;

  cursor:
    pointer;

}


/* =========================================================
   SOURCE BUTTONS
   ========================================================= */

.source-section {

  display:
    flex;

  justify-content:
    center;

  padding:
    17px 0;

}


.source-buttons {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        220px,
        300px
      )
    );

  gap:
    28px;

}


.source-button {

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

  padding:
    0 28px;

  border:
    1px solid
    rgba(
      0,
      151,
      255,
      0.7
    );

  border-radius:
    40px;

  color:
    var(--white);

  background:
    linear-gradient(
      180deg,
      #062e52,
      #03213d
    );

  font-size:
    26px;

  cursor:
    pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;

}


.source-button:hover {

  transform:
    translateY(-2px);

}


.source-button.active {

  border-color:
    var(--cyan);

  background:

    linear-gradient(
      180deg,
      #078cff,
      #09c7f7
    );

  box-shadow:

    0 0 22px
    rgba(
      0,
      194,
      255,
      0.75
    ),

    inset
    0 0 15px
    rgba(
      255,
      255,
      255,
      0.12
    );

}


.source-icon {

  font-size:
    36px;

  line-height:
    1;

}


.globe-icon {

  font-size:
    39px;

}


/* =========================================================
   NOW PLAYING
   ========================================================= */

.now-playing-card {

  position:
    relative;

  width:
    100%;

  min-height:
    295px;

  padding:
    14px 20px 16px;

  overflow:
    hidden;

  border:
    1px solid
    #22aaff;

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at 90% 30%,
      rgba(
        210,
        0,
        255,
        0.17
      ),
      transparent 30%
    ),

    linear-gradient(
      110deg,
      #03264a,
      #01172f 56%,
      #150326
    );

  box-shadow:

    0 0 18px
    rgba(
      0,
      171,
      255,
      0.3
    ),

    inset
    0 0 40px
    rgba(
      0,
      0,
      0,
      0.25
    );

}


.now-playing-card::after {

  content:
    "";

  position:
    absolute;

  inset:
    -1px;

  z-index:
    -1;

  border-radius:
    inherit;

  background:

    linear-gradient(
      90deg,
      #0bcfff,
      #5b39ff,
      #ff17d8
    );

  filter:
    blur(8px);

  opacity:
    0.5;

}


/* =========================================================
   NOW PLAYING TOP
   ========================================================= */

.now-playing-top {

  display:
    grid;

  grid-template-columns:
    300px
    minmax(
      300px,
      1fr
    )
    minmax(
      250px,
      430px
    )
    60px;

  align-items:
    center;

  gap:
    26px;

}


.now-playing-artwork {

  width:
    100%;

  height:
    155px;

  overflow:
    hidden;

  border-radius:
    16px;

  background:

    linear-gradient(
      135deg,
      #ff1493,
      #7d23ff 52%,
      #00a9ff
    );

  box-shadow:
    inset
    0 0 25px
    rgba(
      0,
      0,
      0,
      0.22
    );

}


.now-playing-artwork img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

}


.artwork-placeholder {

  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  font-size:
    70px;

  color:
    var(--white);

}


/* =========================================================
   TRACK INFORMATION
   ========================================================= */

.now-playing-info {

  min-width:
    0;

}


.now-playing-label {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    7px 16px;

  border:
    1px solid
    #e238ff;

  border-radius:
    25px;

  color:
    var(--white);

  background:

    linear-gradient(
      90deg,
      #b80aff,
      #5426ff
    );

  box-shadow:
    0 0 14px
    rgba(
      212,
      0,
      255,
      0.55
    );

  font-size:
    17px;

  font-weight:
    800;

}


.now-playing-info h1 {

  margin:
    9px 0 2px;

  overflow:
    hidden;

  color:
    var(--white);

  font-size:
    clamp(
      30px,
      3vw,
      46px
    );

  line-height:
    1.05;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


.now-playing-info p {

  margin:
    0;

  overflow:
    hidden;

  color:
    #edf7ff;

  font-size:
    24px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


/* =========================================================
   VISUALIZER
   ========================================================= */

.audio-visualizer {

  height:
    110px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    center;

  gap:
    8px;

}


.audio-visualizer span {

  width:
    11px;

  min-height:
    12px;

  border-radius:
    8px 8px 2px 2px;

  background:

    linear-gradient(
      180deg,
      #ff10df,
      #9221ff 48%,
      #164aff
    );

  box-shadow:
    0 0 10px
    rgba(
      206,
      0,
      255,
      0.25
    );

  animation:
    fimiplayVisualizer
    1.2s
    ease-in-out
    infinite alternate;

}


.audio-visualizer span:nth-child(1) {

  height:
    25%;

}


.audio-visualizer span:nth-child(2) {

  height:
    38%;

  animation-delay:
    -0.2s;

}


.audio-visualizer span:nth-child(3) {

  height:
    55%;

  animation-delay:
    -0.4s;

}


.audio-visualizer span:nth-child(4) {

  height:
    72%;

}


.audio-visualizer span:nth-child(5) {

  height:
    95%;

  animation-delay:
    -0.5s;

}


.audio-visualizer span:nth-child(6) {

  height:
    68%;

}


.audio-visualizer span:nth-child(7) {

  height:
    43%;

  animation-delay:
    -0.25s;

}


.audio-visualizer span:nth-child(8) {

  height:
    59%;

}


.audio-visualizer span:nth-child(9) {

  height:
    76%;

  animation-delay:
    -0.3s;

}


.audio-visualizer span:nth-child(10) {

  height:
    48%;

}


.audio-visualizer span:nth-child(11) {

  height:
    30%;

}


.audio-visualizer span:nth-child(12) {

  height:
    18%;

}


@keyframes fimiplayVisualizer {

  from {

    transform:
      scaleY(
        0.58
      );

  }

  to {

    transform:
      scaleY(
        1
      );

  }

}


/* =========================================================
   FAVORITE
   ========================================================= */

.track-favorite-button {

  align-self:
    start;

  width:
    60px;

  height:
    60px;

  border:
    0;

  color:
    #ff62e0;

  background:
    transparent;

  font-size:
    49px;

  cursor:
    pointer;

  filter:
    drop-shadow(
      0 0 10px
      rgba(
        255,
        20,
        220,
        0.6
      )
    );

}


/* =========================================================
   TRACK PROGRESS
   ========================================================= */

.progress-section {

  margin-top:
    5px;

}


.track-progress {

  width:
    100%;

  height:
    6px;

  margin:
    0;

  accent-color:
    var(--blue-bright);

  cursor:
    pointer;

}


.track-times {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    3px;

  font-size:
    17px;

}


/* =========================================================
   PLAYBACK CONTROLS
   ========================================================= */

.playback-controls {

  display:
    grid;

  grid-template-columns:
    1fr
    1fr
    1.2fr
    1fr
    1fr
    2fr;

  align-items:
    center;

  gap:
    16px;

  margin-top:
    5px;

}


.playback-controls > button {

  justify-self:
    center;

  width:
    55px;

  height:
    55px;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    30px;

  cursor:
    pointer;

}


.playback-controls .main-play-button {

  width:
    75px;

  height:
    75px;

  border:
    1px solid
    #16d6ff;

  border-radius:
    50%;

  background:

    linear-gradient(
      180deg,
      #15cfff,
      #0879ff
    );

  box-shadow:

    0 0 20px
    rgba(
      0,
      189,
      255,
      0.75
    );

  font-size:
    31px;

}


.volume-control {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.volume-icon {

  font-size:
    23px;

}


.volume-control input {

  width:
    100%;

  accent-color:
    var(--blue-bright);

}


/* =========================================================
   LIVE SESSIONS SECTION
   ========================================================= */

.live-sessions-section {

  width:
    100%;

  margin-top:
    22px;

  padding:
    12px 34px 18px;

  border:
    1px solid
    rgba(
      17,
      177,
      255,
      0.7
    );

  border-radius:
    28px;

  background:

    linear-gradient(
      120deg,
      rgba(
        3,
        38,
        70,
        0.96
      ),
      rgba(
        0,
        18,
        37,
        0.96
      )
    );

}


/* =========================================================
   LIVE HEADER
   ========================================================= */

.live-sessions-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  margin-bottom:
    9px;

}


.live-title-area {

  display:
    flex;

  align-items:
    center;

  min-width:
    0;

}


.live-title-area h2 {

  margin:
    0;

  color:
    var(--white);

  font-size:
    29px;

  line-height:
    1.1;

}


.live-title-area p {

  margin:
    4px 0 0;

  color:
    var(--cyan);

  font-size:
    18px;

}


/* =========================================================
   LIVE RADIO WAVES
   ========================================================= */

.live-radio-icon {

  position:
    relative;

  flex:
    0 0 72px;

  width:
    72px;

  height:
    60px;

  margin-right:
    12px;

}


.live-radio-icon::before,
.live-radio-icon::after {

  content:
    "";

  position:
    absolute;

  top:
    4px;

  left:
    50%;

  border:
    7px solid
    var(--pink);

  border-top-color:
    transparent;

  border-bottom-color:
    transparent;

  border-radius:
    50%;

  transform:
    translateX(
      -50%
    );

}


.live-radio-icon::before {

  width:
    62px;

  height:
    50px;

}


.live-radio-icon::after {

  top:
    14px;

  width:
    38px;

  height:
    31px;

}


.live-radio-icon span {

  position:
    absolute;

  top:
    24px;

  left:
    50%;

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    var(--pink);

  transform:
    translateX(
      -50%
    );

  box-shadow:
    0 0 15px
    var(--pink);

}


/* =========================================================
   LIVE HEADER BUTTONS
   ========================================================= */

.live-header-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.start-session-button {

  min-height:
    48px;

  padding:
    0 22px;

  border:
    1px solid
    #ff42d8;

  border-radius:
    25px;

  color:
    var(--white);

  background:

    linear-gradient(
      100deg,
      #ff168e,
      #8b20ff
    );

  box-shadow:
    0 0 18px
    rgba(
      255,
      24,
      193,
      0.35
    );

  font-weight:
    800;

  cursor:
    pointer;

}


.see-all-button {

  min-height:
    45px;

  padding:
    0 14px;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    17px;

  cursor:
    pointer;

}


/* =========================================================
   SESSION SLIDER
   ========================================================= */

.sessions-slider-wrapper {

  position:
    relative;

}


.sessions-slider {

  display:
    flex;

  gap:
    16px;

  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  padding:
    2px 0 4px;

  scroll-behavior:
    smooth;

  scroll-snap-type:
    x mandatory;

  scrollbar-width:
    none;

}


.sessions-slider::-webkit-scrollbar {

  display:
    none;

}


/* =========================================================
   SHORT SESSION CARDS
   ========================================================= */

.session-card {

  position:
    relative;

  flex:
    0 0
    clamp(
      190px,
      15.5vw,
      230px
    );

  height:
    151px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      94,
      126,
      255,
      0.85
    );

  border-radius:
    16px;

  background:
    #032544;

  scroll-snap-align:
    start;

  transition:
    transform
    0.18s ease,
    border-color
    0.18s ease;

}


.session-card:hover {

  transform:
    translateY(
      -2px
    );

  border-color:
    var(--cyan);

}


/* =========================================================
   SESSION IMAGE
   ========================================================= */

.session-image {

  position:
    relative;

  width:
    100%;

  height:
    76px;

  overflow:
    hidden;

  background-size:
    cover;

  background-position:
    center;

}


/* PLACEHOLDER ARTWORK UNTIL IMAGES ARE CONNECTED */

.gospel-session-image {

  background:

    radial-gradient(
      circle at 30% 40%,
      #ffdd27,
      transparent 20%
    ),

    linear-gradient(
      135deg,
      #ff6b00,
      #7d1a43 55%,
      #041d42
    );

}


.afrobeats-session-image {

  background:

    radial-gradient(
      circle at 60% 40%,
      #ff22ce,
      transparent 23%
    ),

    linear-gradient(
      135deg,
      #511bff,
      #ff167e,
      #07194d
    );

}


.chill-session-image {

  background:

    linear-gradient(
      135deg,
      #0a1e50,
      #ff007d 55%,
      #4615ff
    );

}


.jamaica-session-image {

  background:

    linear-gradient(
      145deg,
      #14914b,
      #f8d90b 45%,
      #062819
    );

}


.hiphop-session-image {

  background:

    linear-gradient(
      135deg,
      #012a59,
      #5b1fff 50%,
      #ff147d
    );

}


.rb-session-image {

  background:

    linear-gradient(
      135deg,
      #101144,
      #b314ff 55%,
      #ff147d
    );

}


/* =========================================================
   LIVE BADGE
   ========================================================= */

.session-live-badge {

  position:
    absolute;

  top:
    8px;

  left:
    8px;

  padding:
    5px 9px;

  border-radius:
    7px;

  color:
    var(--white);

  background:

    linear-gradient(
      180deg,
      #ff286d,
      #ff0c5b
    );

  box-shadow:
    0 0 12px
    rgba(
      255,
      0,
      92,
      0.5
    );

  font-size:
    13px;

  font-weight:
    900;

}


/* =========================================================
   LISTENER COUNT
   ========================================================= */

.session-listener-count {

  position:
    absolute;

  bottom:
    5px;

  left:
    8px;

  padding:
    3px 8px;

  border-radius:
    15px;

  color:
    var(--white);

  background:
    rgba(
      0,
      9,
      22,
      0.8
    );

  font-size:
    12px;

  font-weight:
    700;

}


/* =========================================================
   SESSION BODY
   ========================================================= */

.session-card-body {

  padding:
    6px 9px;

}


.session-card-body h3 {

  margin:
    0;

  overflow:
    hidden;

  color:
    var(--white);

  font-size:
    15px;

  line-height:
    1.2;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


.session-card-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    6px;

  margin-top:
    7px;

}


.session-genre {

  min-width:
    0;

  overflow:
    hidden;

  padding:
    4px 10px;

  border:
    1px solid
    rgba(
      12,
      141,
      225,
      0.7
    );

  border-radius:
    15px;

  color:
    #eaf9ff;

  background:
    #06345b;

  font-size:
    12px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


/* =========================================================
   SMALL JOIN BUTTON
   ========================================================= */

.session-join-button {

  flex:
    0 0 auto;

  min-width:
    54px;

  height:
    28px;

  padding:
    0 12px;

  border:
    1px solid
    var(--cyan);

  border-radius:
    15px;

  color:
    var(--white);

  background:

    linear-gradient(
      180deg,
      #13cfff,
      #087dff
    );

  box-shadow:
    0 0 10px
    rgba(
      0,
      192,
      255,
      0.4
    );

  font-size:
    12px;

  font-weight:
    800;

  cursor:
    pointer;

}


/* =========================================================
   SLIDER ARROWS
   ========================================================= */

.session-slider-arrow {

  position:
    absolute;

  z-index:
    5;

  top:
    39px;

  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--cyan);

  border-radius:
    50%;

  color:
    var(--white);

  background:
    #001b34;

  box-shadow:
    0 0 15px
    rgba(
      0,
      186,
      255,
      0.25
    );

  font-size:
    35px;

  cursor:
    pointer;

}


.session-slider-left {

  left:
    -26px;

}


.session-slider-right {

  right:
    -26px;

}


/* =========================================================
   SLIDER DOTS
   ========================================================= */

.session-slider-dots {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin-top:
    12px;

}


.session-slider-dots button {

  width:
    12px;

  height:
    12px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #31557a;

  cursor:
    pointer;

}


.session-slider-dots button.active {

  background:
    var(--blue-bright);

  box-shadow:
    0 0 10px
    var(--blue-bright);

}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-navigation {

  position:
    fixed;

  z-index:
    30;

  right:
    0;

  bottom:
    0;

  left:
    0;

  min-height:
    100px;

  display:
    grid;

  grid-template-columns:
    repeat(
      6,
      1fr
    );

  padding:
    0 max(
      10px,
      env(
        safe-area-inset-right
      )
    )
    env(
      safe-area-inset-bottom
    )
    max(
      10px,
      env(
        safe-area-inset-left
      )
    );

  border-top:
    1px solid
    rgba(
      15,
      149,
      216,
      0.65
    );

  background:
    rgba(
      0,
      18,
      35,
      0.97
    );

  backdrop-filter:
    blur(
      15px
    );

}


.bottom-nav-item {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    16px;

  cursor:
    pointer;

}


.bottom-nav-icon {

  font-size:
    31px;

  line-height:
    1;

}


.bottom-nav-item.active {

  color:
    var(--cyan);

}


.bottom-nav-item.active
.bottom-nav-icon {

  text-shadow:

    0 0 10px
    var(--cyan),

    0 0 20px
    var(--blue);

}


.social-nav-item {

  position:
    relative;

}


.social-notification-dot {

  position:
    absolute;

  top:
    18px;

  left:
    calc(
      50% + 16px
    );

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    var(--pink);

  box-shadow:
    0 0 8px
    var(--pink);

}


/* =========================================================
   SIDE MENU
   ========================================================= */

.menu-overlay {

  position:
    fixed;

  z-index:
    80;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.65
    );

  backdrop-filter:
    blur(
      4px
    );

}


.side-menu {

  position:
    fixed;

  z-index:
    90;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    min(
      360px,
      88vw
    );

  padding:
    25px;

  border-right:
    1px solid
    var(--blue);

  background:

    linear-gradient(
      180deg,
      #032846,
      #001426
    );

  box-shadow:
    20px 0 50px
    rgba(
      0,
      0,
      0,
      0.5
    );

  transform:
    translateX(
      -105%
    );

  transition:
    transform
    0.25s ease;

}


.side-menu.open {

  transform:
    translateX(
      0
    );

}


.side-menu-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    25px;

}


.side-menu-brand {

  display:
    flex;

  flex-direction:
    column;

}


.side-menu-brand strong {

  font-size:
    26px;

}


.side-menu-brand strong span {

  color:
    var(--cyan);

}


.side-menu-brand small {

  margin-top:
    4px;

  letter-spacing:
    3px;

}


#closeMenuButton {

  width:
    45px;

  height:
    45px;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    36px;

  cursor:
    pointer;

}


.side-menu-links {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.side-menu-links button,
.side-menu-links a {

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  width:
    100%;

  padding:
    0 15px;

  border:
    1px solid
    transparent;

  border-radius:
    15px;

  color:
    var(--white);

  background:
    transparent;

  text-align:
    left;

  text-decoration:
    none;

  cursor:
    pointer;

}


.side-menu-links button:hover,
.side-menu-links a:hover {

  border-color:
    var(--border);

  background:
    #063256;

}


.side-menu-links hr {

  width:
    100%;

  border:
    0;

  border-top:
    1px solid
    #194360;

}


/* =========================================================
   MODAL
   ========================================================= */

.modal-layer {

  position:
    fixed;

  z-index:
    120;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(
      0,
      5,
      14,
      0.82
    );

  backdrop-filter:
    blur(
      8px
    );

}


.modal-layer[hidden] {

  display:
    none;

}


.modal-card {

  position:
    relative;

  width:
    min(
      500px,
      100%
    );

  max-height:
    calc(
      100vh - 40px
    );

  overflow-y:
    auto;

  padding:
    28px;

  border:
    1px solid
    var(--blue);

  border-radius:
    26px;

  background:

    linear-gradient(
      150deg,
      #073458,
      #011528
    );

  box-shadow:

    0 0 40px
    rgba(
      0,
      166,
      255,
      0.3
    );

}


.modal-close-button {

  position:
    absolute;

  top:
    14px;

  right:
    14px;

  width:
    44px;

  height:
    44px;

  border:
    0;

  color:
    var(--white);

  background:
    transparent;

  font-size:
    34px;

  cursor:
    pointer;

}


.modal-eyebrow {

  color:
    var(--pink-bright);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    2px;

}


.modal-card h2 {

  margin:
    6px 0;

  font-size:
    31px;

}


.modal-intro {

  margin:
    0 0 20px;

  color:
    var(--muted);

}


/* =========================================================
   FORM
   ========================================================= */

.form-field {

  display:
    block;

  margin:
    17px 0;

}


.form-field > span {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #bcecff;

  font-size:
    14px;

  font-weight:
    700;

}


.form-field input,
.form-field select {

  width:
    100%;

  min-height:
    49px;

  padding:
    0 14px;

  border:
    1px solid
    #156a9e;

  border-radius:
    14px;

  outline:
    0;

  color:
    var(--white);

  background:
    #021d36;

}


.session-source-options {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

}


.session-source-option {

  min-height:
    50px;

  border:
    1px solid
    #1372ac;

  border-radius:
    15px;

  color:
    var(--white);

  background:
    #032846;

  cursor:
    pointer;

}


.session-source-option.active {

  border-color:
    var(--cyan);

  background:

    linear-gradient(
      180deg,
      #0aa9ff,
      #0878ff
    );

}


.primary-action-button {

  width:
    100%;

  min-height:
    53px;

  margin-top:
    8px;

  border:
    0;

  border-radius:
    18px;

  color:
    var(--white);

  background:

    linear-gradient(
      100deg,
      #08c9ff,
      #0879ff
    );

  box-shadow:
    var(--shadow-blue);

  font-weight:
    800;

  cursor:
    pointer;

}


/* =========================================================
   JOINING OVERLAY
   ========================================================= */

.joining-session-overlay {

  position:
    fixed;

  z-index:
    150;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(
      0,
      8,
      18,
      0.9
    );

  backdrop-filter:
    blur(
      10px
    );

}


.joining-session-overlay[hidden] {

  display:
    none;

}


.joining-session-card {

  width:
    min(
      390px,
      100%
    );

  padding:
    35px;

  border:
    1px solid
    var(--cyan);

  border-radius:
    28px;

  background:
    #032846;

  text-align:
    center;

  box-shadow:
    0 0 45px
    rgba(
      0,
      197,
      255,
      0.32
    );

}


.joining-live-icon {

  margin-bottom:
    10px;

  color:
    var(--pink);

  font-size:
    60px;

  text-shadow:
    0 0 20px
    var(--pink);

}


.joining-session-card small {

  color:
    var(--cyan);

  letter-spacing:
    2px;

}


.joining-session-card h2 {

  margin:
    8px 0;

}


.joining-session-card p {

  color:
    var(--muted);

}


.joining-loader {

  display:
    flex;

  justify-content:
    center;

  gap:
    8px;

  margin-top:
    20px;

}


.joining-loader span {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    var(--cyan);

  animation:
    joiningDots
    0.8s
    infinite alternate;

}


.joining-loader span:nth-child(2) {

  animation-delay:
    0.2s;

}


.joining-loader span:nth-child(3) {

  animation-delay:
    0.4s;

}


@keyframes joiningDots {

  from {

    opacity:
      0.25;

    transform:
      translateY(
        0
      );

  }

  to {

    opacity:
      1;

    transform:
      translateY(
        -7px
      );

  }

}


/* =========================================================
   TOAST
   ========================================================= */

.fimiplay-toast {

  position:
    fixed;

  z-index:
    200;

  bottom:
    120px;

  left:
    50%;

  max-width:
    calc(
      100% - 30px
    );

  padding:
    11px 20px;

  border:
    1px solid
    var(--cyan);

  border-radius:
    25px;

  color:
    var(--white);

  background:
    #063457;

  box-shadow:
    0 0 20px
    rgba(
      0,
      205,
      255,
      0.3
    );

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      20px
    );

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

}


.fimiplay-toast.show {

  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 1050px
) {

  .fimiplay-app {

    padding-right:
      18px;

    padding-left:
      18px;

  }


  .app-header {

    grid-template-columns:
      80px 1fr 160px;

  }


  .now-playing-top {

    grid-template-columns:
      220px
      1fr
      260px
      45px;

  }


  .audio-visualizer {

    gap:
      5px;

  }


  .audio-visualizer span {

    width:
      8px;

  }


  .live-title-area h2 {

    font-size:
      24px;

  }


  .live-title-area p {

    font-size:
      15px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 700px
) {

  .fimiplay-app {

    padding:
      0 12px 95px;

  }


  /* HEADER */

  .app-header {

    min-height:
      67px;

    grid-template-columns:
      52px 1fr 92px;

    gap:
      6px;

  }


  .menu-button {

    width:
      42px;

    height:
      42px;

  }


  .menu-button span {

    width:
      29px;

    height:
      3px;

  }


  .fimiplay-brand {

    gap:
      6px;

  }


  .brand-radio-waves {

    width:
      38px;

    height:
      35px;

  }


  .brand-radio-waves .wave {

    border-width:
      4px;

  }


  .brand-radio-waves .wave-one {

    width:
      38px;

    height:
      38px;

  }


  .brand-radio-waves .wave-two {

    top:
      8px;

    width:
      27px;

    height:
      27px;

  }


  .brand-radio-waves .wave-three {

    top:
      16px;

    width:
      16px;

    height:
      16px;

  }


  .brand-radio-waves i {

    width:
      6px;

    height:
      6px;

  }


  .brand-name strong {

    font-size:
      25px;

  }


  .brand-name small {

    margin-top:
      6px;

    font-size:
      7px;

    letter-spacing:
      3px;

  }


  .favorite-button {

    display:
      none;

  }


  .notification-button {

    display:
      none;

  }


  .header-actions {

    gap:
      0;

  }


  .profile-avatar {

    width:
      42px;

    height:
      42px;

  }


  /* SEARCH */

  .search-bar {

    min-height:
      49px;

    padding:
      0 14px;

  }


  .search-icon {

    margin-right:
      8px;

    font-size:
      29px;

  }


  .search-bar input {

    font-size:
      14px;

  }


  .filter-button {

    width:
      35px;

    height:
      35px;

    font-size:
      22px;

  }


  /* SOURCE BUTTONS */

  .source-section {

    padding:
      11px 0;

  }


  .source-buttons {

    width:
      100%;

    grid-template-columns:
      1fr 1fr;

    gap:
      10px;

  }


  .source-button {

    min-height:
      50px;

    gap:
      8px;

    padding:
      0 12px;

    font-size:
      17px;

  }


  .source-icon {

    font-size:
      24px;

  }


  .globe-icon {

    font-size:
      25px;

  }


  /* NOW PLAYING */

  .now-playing-card {

    min-height:
      0;

    padding:
      10px;

    border-radius:
      20px;

  }


  .now-playing-top {

    grid-template-columns:
      96px
      minmax(
        0,
        1fr
      )
      35px;

    gap:
      10px;

  }


  .now-playing-artwork {

    height:
      95px;

    border-radius:
      12px;

  }


  .artwork-placeholder {

    font-size:
      40px;

  }


  .now-playing-label {

    padding:
      5px 8px;

    font-size:
      10px;

  }


  .now-playing-info h1 {

    margin-top:
      7px;

    font-size:
      22px;

  }


  .now-playing-info p {

    font-size:
      13px;

  }


  .audio-visualizer {

    display:
      none;

  }


  .track-favorite-button {

    width:
      35px;

    height:
      35px;

    font-size:
      29px;

  }


  .track-times {

    font-size:
      12px;

  }


  .playback-controls {

    grid-template-columns:
      repeat(
        5,
        1fr
      );

    gap:
      2px;

    margin-top:
      1px;

  }


  .playback-controls > button {

    width:
      40px;

    height:
      40px;

    font-size:
      19px;

  }


  .playback-controls
  .main-play-button {

    width:
      52px;

    height:
      52px;

    font-size:
      20px;

  }


  .volume-control {

    display:
      none;

  }


  /* LIVE SECTION */

  .live-sessions-section {

    margin-top:
      13px;

    padding:
      10px 12px 13px;

    border-radius:
      20px;

  }


  .live-sessions-header {

    gap:
      5px;

    margin-bottom:
      8px;

  }


  .live-title-area {

    flex:
      1;

  }


  .live-radio-icon {

    flex-basis:
      39px;

    width:
      39px;

    height:
      38px;

    margin-right:
      7px;

  }


  .live-radio-icon::before {

    width:
      35px;

    height:
      29px;

    border-width:
      4px;

  }


  .live-radio-icon::after {

    top:
      10px;

    width:
      20px;

    height:
      17px;

    border-width:
      4px;

  }


  .live-radio-icon span {

    top:
      16px;

    width:
      8px;

    height:
      8px;

  }


  .live-title-area h2 {

    font-size:
      17px;

  }


  .live-title-area p {

    max-width:
      220px;

    margin-top:
      3px;

    font-size:
      10px;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

  }


  .start-session-button {

    width:
      39px;

    min-width:
      39px;

    height:
      39px;

    min-height:
      39px;

    padding:
      0;

    overflow:
      hidden;

    border-radius:
      50%;

    color:
      transparent;

    font-size:
      0;

  }


  .start-session-button::before {

    content:
      "+";

    color:
      var(--white);

    font-size:
      25px;

  }


  .see-all-button {

    min-height:
      39px;

    padding:
      0 4px;

    font-size:
      12px;

  }


  /* MOBILE SESSION SLIDER */

  .sessions-slider {

    gap:
      9px;

  }


  .session-card {

    flex-basis:
      158px;

    height:
      133px;

    border-radius:
      13px;

  }


  .session-image {

    height:
      67px;

  }


  .session-live-badge {

    top:
      6px;

    left:
      6px;

    padding:
      4px 7px;

    font-size:
      10px;

  }


  .session-listener-count {

    bottom:
      4px;

    left:
      6px;

    padding:
      2px 6px;

    font-size:
      10px;

  }


  .session-card-body {

    padding:
      5px 7px;

  }


  .session-card-body h3 {

    font-size:
      12px;

  }


  .session-card-footer {

    margin-top:
      5px;

  }


  .session-genre {

    max-width:
      85px;

    padding:
      3px 7px;

    font-size:
      9px;

  }


  .session-join-button {

    min-width:
      45px;

    height:
      24px;

    padding:
      0 8px;

    font-size:
      9px;

  }


  .session-slider-arrow {

    display:
      none;

  }


  .session-slider-dots {

    gap:
      8px;

    margin-top:
      8px;

  }


  .session-slider-dots button {

    width:
      8px;

    height:
      8px;

  }


  /* BOTTOM NAV */

  .bottom-navigation {

    min-height:
      75px;

  }


  .bottom-nav-item {

    gap:
      3px;

    font-size:
      9px;

  }


  .bottom-nav-icon {

    font-size:
      22px;

  }


  .social-notification-dot {

    top:
      11px;

    width:
      9px;

    height:
      9px;

  }


  /* MODAL */

  .modal-layer {

    align-items:
      end;

    padding:
      0;

  }


  .modal-card {

    width:
      100%;

    max-height:
      88vh;

    padding:
      23px 18px
      calc(
        23px +
        env(
          safe-area-inset-bottom
        )
      );

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

    border-radius:
      25px 25px 0 0;

  }


}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (
  max-width: 390px
) {

  .brand-name strong {

    font-size:
      21px;

  }


  .brand-radio-waves {

    display:
      none;

  }


  .search-bar input {

    font-size:
      12px;

  }


  .source-button {

    font-size:
      15px;

  }


  .now-playing-top {

    grid-template-columns:
      82px
      minmax(
        0,
        1fr
      )
      30px;

  }


  .now-playing-artwork {

    height:
      82px;

  }


  .live-title-area h2 {

    font-size:
      15px;

  }


  .live-title-area p {

    max-width:
      175px;

  }


  .session-card {

    flex-basis:
      145px;

  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  * {

    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}