html,
body {
  height: 100%;
}

body.player-screen {
  padding: 28px;
  background: #09090d;
  overflow: hidden;
}

body.player-screen .app-shell {
  overflow: hidden;
}

.app-shell {
  width: 100%;
  height: calc(100vh - 56px);
  min-height: 560px;
  background: #191923;
  border: 2px solid #3d3426;
  box-shadow: 0 0 0 4px #08080c, 0 18px 42px rgba(0,0,0,.55);
  display: table;
  table-layout: fixed;
  overflow: hidden;
}

.left-panel,
.right-panel {
  display: table-cell;
  vertical-align: top;
  height: 100%;
  overflow: hidden;
}

.left-panel {
  width: 38%;
  min-width: 360px;
  background: #12121a;
  border-right: 2px solid #3d3426;
}

.right-panel {
  width: 62%;
  background: #20202c;
  position: relative;
  padding: 28px;
  text-align: center;
  overflow: hidden;
}

.panel-head {
  height: 132px;
  padding: 18px;
  background: #1f1a17;
  border-bottom: 2px solid #3d3426;
  overflow: hidden;
}

.back-link {
  display: inline-block;
  padding: 7px 14px;
  margin-bottom: 9px;
  border: 2px solid #3d3426;
  color: #d8c6a4;
  background: #15151c;
  font-size: 18px;
  line-height: 22px;
  text-decoration: none;
  outline: none;
}

.back-link.focused,
.back-link:focus {
  background: #3a2a16;
  color: #ffd36f;
  border-color: #ffb84d;
  box-shadow: 0 0 0 3px rgba(255,184,77,.28);
}

.panel-head h1 {
  margin: 0;
  color: #ffb84d;
  font-size: 31px;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-sub {
  margin-top: 4px;
  color: #a99d85;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-list {
  height: 420px;
  padding: 14px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.station-list-inner {
  position: relative;
  top: 0;
  left: 0;
}

.station-more {
  height: 24px;
  line-height: 24px;
  margin: 0 0 6px 0;
  color: #8f8f9c;
  font-size: 14px;
  text-align: center;
}

.station-btn {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0 0 8px 0;
  padding: 0 12px;
  border: 2px solid #2e2e3b;
  background: #1b1b27;
  color: #d8d4c8;
  text-align: left;
  font-size: 19px;
  line-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

.station-btn .num {
  display: inline-block;
  width: 34px;
  color: #8f8f9c;
}

.station-btn .fav-mark {
  float: right;
  color: #ffb84d;
}

.station-btn.active {
  background: #6d4318;
  border-color: #ffb84d;
  color: #fff0c8;
}

.station-btn.focused,
.control.focused,
.volume button.focused,
.station-btn:focus,
.control:focus,
.volume button:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,184,77,.32);
}

.now-box {
  background: #111118;
  border: 2px solid #3d3426;
  padding: 18px;
  text-align: left;
  min-height: 118px;
}

.small-label {
  color: #968c78;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.station-name {
  margin-top: 8px;
  color: #ffb84d;
  font-size: 34px;
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status {
  margin-top: 8px;
  color: #c7bca4;
  font-size: 18px;
}

.status.live {
  color: #ff695c;
}

.visual {
  height: 300px;
  margin: 26px auto 18px auto;
  position: relative;
  overflow: hidden;
}

.controls {
  white-space: nowrap;
}

.control {
  width: 88px;
  height: 62px;
  margin: 0 7px;
  border: 2px solid #3f3f4f;
  background: #2b2b38;
  color: #f6d28b;
  font-size: 28px;
  cursor: pointer;
  outline: none;
}

.control.play {
  width: 108px;
  background: #6d4318;
  border-color: #ffb84d;
  color: #fff0c8;
}

.control.fav {
  color: #ffb84d;
}

.volume {
  margin: 22px auto 0 auto;
  width: 400px;
  border: 2px solid #343443;
  background: #15151d;
  padding: 12px;
  color: #cfc3aa;
  font-size: 18px;
  white-space: nowrap;
}

.volume button {
  width: 56px;
  height: 42px;
  margin-left: 8px;
  border: 2px solid #3f3f4f;
  background: #2b2b38;
  color: #f6d28b;
  font-size: 24px;
  cursor: pointer;
  outline: none;
}

.volume strong {
  display: inline-block;
  width: 68px;
  color: #ffb84d;
  text-align: right;
}

.help {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  border-top: 1px solid #3d3426;
  padding-top: 12px;
  color: #918773;
  font-size: 15px;
}

.visual-vinyl,
.visual-cassette,
.visual-simple,
.visual-amp,
.visual-receiver {
  display: none;
  height: 100%;
}

.playing .record,
.playing .reel {
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body.color-amber { background: #0f0b07; }
body.color-violet { background: #0f0a17; }
body.color-red { background: #120909; }
body.color-blue { background: #08101a; }
body.color-green { background: #07120d; }
body.color-gold { background: #171108; }

body.color-amber .station-name,
body.color-amber .panel-head h1,
body.color-amber .volume strong,
body.color-amber .control.fav,
body.color-amber .station-btn .fav-mark { color: #ffb84d; }

body.color-violet .station-name,
body.color-violet .panel-head h1,
body.color-violet .volume strong,
body.color-violet .control.fav,
body.color-violet .station-btn .fav-mark { color: #c09aff; }

body.color-red .station-name,
body.color-red .panel-head h1,
body.color-red .volume strong,
body.color-red .control.fav,
body.color-red .station-btn .fav-mark { color: #ff796b; }

body.color-blue .station-name,
body.color-blue .panel-head h1,
body.color-blue .volume strong,
body.color-blue .control.fav,
body.color-blue .station-btn .fav-mark { color: #83caff; }

body.color-green .station-name,
body.color-green .panel-head h1,
body.color-green .volume strong,
body.color-green .control.fav,
body.color-green .station-btn .fav-mark { color: #8de0b4; }

body.color-gold .station-name,
body.color-gold .panel-head h1,
body.color-gold .volume strong,
body.color-gold .control.fav,
body.color-gold .station-btn .fav-mark { color: #ffd36f; }

body.color-amber .station-btn.active,
body.color-amber .control.play { background: #6d4318; border-color: #ffb84d; }

body.color-violet .station-btn.active,
body.color-violet .control.play { background: #3a235f; border-color: #c09aff; }

body.color-red .station-btn.active,
body.color-red .control.play { background: #622018; border-color: #ff796b; }

body.color-blue .station-btn.active,
body.color-blue .control.play { background: #1b3f62; border-color: #83caff; }

body.color-green .station-btn.active,
body.color-green .control.play { background: #1e4836; border-color: #8de0b4; }

body.color-gold .station-btn.active,
body.color-gold .control.play { background: #5a4218; border-color: #ffd36f; }

.visual-boombox,
.visual-reel,
.visual-tube,
.visual-walkman,
.visual-jukebox,
.visual-minidisc,
.visual-equalizer,
.visual-carstereo,
.visual-gramophone,
.visual-terminal {
  display: none;
  height: 100%;
}

body.color-cyan { background: #061118; }
body.color-orange { background: #120b06; }
body.color-silver { background: #0d0f14; }
body.color-sepia { background: #120e0a; }
body.color-brass { background: #130d06; }
body.color-neon { background: #090812; }
body.color-terminal { background: #020804; }
body.color-warm { background: #100b07; }
body.color-purple { background: #100818; }

body.color-cyan .station-name,
body.color-cyan .panel-head h1,
body.color-cyan .volume strong,
body.color-cyan .control.fav,
body.color-cyan .station-btn .fav-mark { color: #41e7ff; }

body.color-orange .station-name,
body.color-orange .panel-head h1,
body.color-orange .volume strong,
body.color-orange .control.fav,
body.color-orange .station-btn .fav-mark { color: #ff8c2a; }

body.color-silver .station-name,
body.color-silver .panel-head h1,
body.color-silver .volume strong,
body.color-silver .control.fav,
body.color-silver .station-btn .fav-mark { color: #d8dee8; }

body.color-sepia .station-name,
body.color-sepia .panel-head h1,
body.color-sepia .volume strong,
body.color-sepia .control.fav,
body.color-sepia .station-btn .fav-mark { color: #e0b45c; }

body.color-brass .station-name,
body.color-brass .panel-head h1,
body.color-brass .volume strong,
body.color-brass .control.fav,
body.color-brass .station-btn .fav-mark { color: #d8a040; }

body.color-neon .station-name,
body.color-neon .panel-head h1,
body.color-neon .volume strong,
body.color-neon .control.fav,
body.color-neon .station-btn .fav-mark { color: #ff5fd7; }

body.color-terminal .station-name,
body.color-terminal .panel-head h1,
body.color-terminal .volume strong,
body.color-terminal .control.fav,
body.color-terminal .station-btn .fav-mark { color: #39ff88; }

body.color-warm .station-name,
body.color-warm .panel-head h1,
body.color-warm .volume strong,
body.color-warm .control.fav,
body.color-warm .station-btn .fav-mark { color: #ffb24d; }

body.color-purple .station-name,
body.color-purple .panel-head h1,
body.color-purple .volume strong,
body.color-purple .control.fav,
body.color-purple .station-btn .fav-mark { color: #b967ff; }

body.color-cyan .station-btn.active,
body.color-cyan .control.play { background: #113b45; border-color: #41e7ff; }

body.color-orange .station-btn.active,
body.color-orange .control.play { background: #5a2d0f; border-color: #ff8c2a; }

body.color-silver .station-btn.active,
body.color-silver .control.play { background: #444a55; border-color: #d8dee8; }

body.color-sepia .station-btn.active,
body.color-sepia .control.play { background: #4a3219; border-color: #e0b45c; }

body.color-brass .station-btn.active,
body.color-brass .control.play { background: #533516; border-color: #d8a040; }

body.color-neon .station-btn.active,
body.color-neon .control.play { background: #4c1c55; border-color: #ff5fd7; }

body.color-terminal .station-btn.active,
body.color-terminal .control.play { background: #07351a; border-color: #39ff88; }

body.color-warm .station-btn.active,
body.color-warm .control.play { background: #5a2e13; border-color: #ffb24d; }

body.color-purple .station-btn.active,
body.color-purple .control.play { background: #3b1f59; border-color: #b967ff; }

@media (max-width: 900px) {
  html,
  body {
    height: auto;
  }

  body.player-screen {
    padding: 14px;
    overflow: auto;
  }

  .app-shell,
  .left-panel,
  .right-panel {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .left-panel {
    min-width: 0;
    border-right: 0;
    border-bottom: 2px solid #3d3426;
  }

  .station-list {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .right-panel {
    min-height: 640px;
  }
}