/* RESONANCE Playlist Module
   UI + editor constructor
   Version 1.0
*/

:root{
  --rpl-page:#121413;
  --rpl-panel:#181b19;
  --rpl-text:#f7f8f7;
  --rpl-muted:rgba(247,248,247,.60);
  --rpl-line:rgba(255,255,255,.085);
  --rpl-radius:22px;
  --rpl-shadow:0 20px 55px rgba(0,0,0,.24);
  --rpl-font:Inter,Arial,Helvetica,sans-serif;
}

.rpl-playlist,
.rpl-playlist *{
  box-sizing:border-box;
}

.rpl-playlist{
  --rpl-accent:#1ed760;
  --rpl-bg-image:none;
  position:relative;
  isolation:isolate;
  width:100%;
  margin:18px 0;
  overflow:hidden;
  border-radius:var(--rpl-radius);
  background:var(--rpl-page);
  color:var(--rpl-text);
  box-shadow:var(--rpl-shadow);
  font-family:var(--rpl-font);
}

.rpl-playlist::before{
  content:"";
  position:absolute;
  z-index:-3;
  inset:0 0 auto;
  height:530px;
  pointer-events:none;
  background-image:var(--rpl-bg-image);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 47%,
    rgba(0,0,0,.94) 52%,
    rgba(0,0,0,.78) 58%,
    rgba(0,0,0,.58) 65%,
    rgba(0,0,0,.38) 72%,
    rgba(0,0,0,.22) 79%,
    rgba(0,0,0,.10) 86%,
    transparent 94%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 47%,
    rgba(0,0,0,.94) 52%,
    rgba(0,0,0,.78) 58%,
    rgba(0,0,0,.58) 65%,
    rgba(0,0,0,.38) 72%,
    rgba(0,0,0,.22) 79%,
    rgba(0,0,0,.10) 86%,
    transparent 94%
  );
}

.rpl-playlist::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 auto;
  height:530px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(6,8,7,.05) 0%,
    rgba(6,8,7,.08) 45%,
    rgba(7,9,8,.20) 50%,
    rgba(8,10,9,.38) 55%,
    rgba(10,12,11,.58) 61%,
    rgba(12,14,13,.74) 68%,
    rgba(14,16,15,.86) 75%,
    rgba(15,17,16,.94) 83%,
    rgba(15,17,16,.985) 91%,
    var(--rpl-page) 96%
  );
}

.rpl-hero{
  position:relative;
  min-height:250px;
  display:flex;
  align-items:flex-end;
  gap:24px;
  padding:28px;
  isolation:isolate;
  background:transparent !important;
}

.rpl-hero::before{
  content:none !important;
  display:none !important;
}

.rpl-cover{
  width:160px;
  min-width:160px;
  height:160px;
  overflow:hidden;
  border-radius:13px;
  background:rgba(255,255,255,.10);
  box-shadow:0 15px 38px rgba(0,0,0,.36);
}

.rpl-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.rpl-cover-empty{
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  font-size:48px;
  opacity:.75;
}

.rpl-meta{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  text-align:left !important;
}

.rpl-type{
  margin:0 0 8px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

.rpl-title{
  display:block !important;
  position:static !important;
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 2px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:#fff !important;
  font-family:var(--rpl-font) !important;
  font-size:clamp(32px,5vw,54px) !important;
  line-height:.98 !important;
  font-weight:800 !important;
  font-style:normal !important;
  letter-spacing:-.035em !important;
  text-align:left !important;
  text-decoration:none !important;
  text-transform:none !important;
  overflow-wrap:anywhere;
  text-shadow:0 1px 14px rgba(0,0,0,.22);
}

.rpl-description{
  max-width:820px;
  margin-top:12px;
  color:rgba(255,255,255,.74);
  font-size:13px;
  line-height:1.55;
}

.rpl-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:13px;
  font-size:12px;
  color:rgba(255,255,255,.86);
}

.rpl-info strong{
  color:#fff;
}

.rpl-dot{
  opacity:.55;
}

.rpl-body{
  position:relative;
  isolation:isolate;
  padding:20px 22px 18px;
  background:transparent !important;
}

.rpl-body::before{
  content:none !important;
  display:none !important;
}

.rpl-controls{
  display:grid;
  grid-template-columns:auto auto minmax(140px,1fr);
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.rpl-btn{
  appearance:none;
  border:0;
  font:inherit;
  cursor:pointer;
}

.rpl-main-play{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  padding:0;
  border-radius:50%;
  background:var(--rpl-accent);
  color:#081009;
  font-size:20px;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  transition:transform .18s ease, filter .18s ease;
}

.rpl-main-play:hover{
  transform:scale(1.045);
  filter:brightness(1.05);
}

.rpl-shuffle{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border-radius:50%;
  background:transparent;
  color:rgba(255,255,255,.62);
  font-size:18px;
}

.rpl-shuffle:hover,
.rpl-shuffle.is-on{
  color:var(--rpl-accent);
  background:rgba(255,255,255,.055);
}

.rpl-now{
  min-width:0;
}

.rpl-now-title{
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-now-sub{
  overflow:hidden;
  margin-top:3px;
  color:var(--rpl-muted);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-progress-row{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:38px minmax(80px,1fr) 38px;
  gap:9px;
  align-items:center;
}

.rpl-time{
  color:var(--rpl-muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}

.rpl-time:last-child{
  text-align:right;
}

.rpl-progress{
  position:relative;
  height:5px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.14);
  cursor:pointer;
}

.rpl-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:inherit;
  background:#fff;
  pointer-events:none;
}

.rpl-track-head,
.rpl-track{
  display:grid;
  grid-template-columns:42px minmax(0,1.6fr) minmax(100px,1fr) 56px;
  gap:10px;
  align-items:center;
}

.rpl-track-head{
  min-height:34px;
  padding:0 8px;
  border-bottom:1px solid var(--rpl-line);
  color:rgba(255,255,255,.42);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.rpl-track-head > :first-child{
  text-align:center;
}

.rpl-track-head > :last-child{
  text-align:right;
}

.rpl-track{
  position:relative;
  min-height:58px;
  padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.035);
  border-radius:8px;
  transition:background .15s ease;
}

.rpl-track:hover{
  background:rgba(255,255,255,.055);
}

.rpl-track.is-active{
  background:rgba(255,255,255,.07);
}

.rpl-track-number{
  display:grid;
  place-items:center;
  color:var(--rpl-muted);
  font-size:12px;
}

.rpl-track-play{
  display:none;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:13px;
}

.rpl-track:hover .rpl-index,
.rpl-track.is-active .rpl-index{
  display:none;
}

.rpl-track:hover .rpl-track-play,
.rpl-track.is-active .rpl-track-play{
  display:grid;
}

.rpl-song{
  min-width:0;
}

.rpl-song-title{
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-track.is-active .rpl-song-title{
  color:var(--rpl-accent);
}

.rpl-song-artist,
.rpl-album,
.rpl-duration{
  overflow:hidden;
  color:var(--rpl-muted);
  font-size:11px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-song-artist{
  margin-top:3px;
}

.rpl-duration{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.rpl-empty{
  padding:18px 8px 6px;
  color:var(--rpl-muted);
  font-size:12px;
}

/* editor button */

.rpl-editor-btn{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin:0 3px 5px 0;
  padding:0;
  border:1px solid rgba(0,0,0,.12);
  border-radius:6px;
  background:rgba(255,255,255,.75);
  color:#252825;
  font:700 15px/1 Arial,sans-serif;
  cursor:pointer;
  vertical-align:middle;
}

.rpl-editor-btn:hover{
  background:#fff;
}

/* modal constructor */

.rpl-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(5px);
}

.rpl-modal-backdrop.is-open{
  display:flex;
}

.rpl-modal{
  width:min(850px,100%);
  max-height:min(86vh,900px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:#171917;
  color:#f5f7f5;
  box-shadow:0 25px 80px rgba(0,0,0,.42);
  font-family:var(--rpl-font);
}

.rpl-modal-header{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:17px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(23,25,23,.96);
  backdrop-filter:blur(10px);
}

.rpl-modal-title{
  font-size:16px;
  font-weight:800;
}

.rpl-modal-close{
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:19px;
  cursor:pointer;
}

.rpl-modal-content{
  padding:20px;
}

.rpl-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

.rpl-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rpl-field.rpl-span-2{
  grid-column:1/-1;
}

.rpl-field label{
  color:rgba(255,255,255,.62);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.rpl-field input,
.rpl-field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  outline:0;
  background:#0f1110;
  color:#fff;
  font:12px/1.45 var(--rpl-font);
}

.rpl-field input{
  height:38px;
  padding:0 11px;
}

.rpl-field textarea{
  min-height:72px;
  padding:10px 11px;
  resize:vertical;
}

.rpl-field input:focus,
.rpl-field textarea:focus{
  border-color:rgba(255,255,255,.28);
}

.rpl-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:23px 0 10px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.rpl-add-track,
.rpl-insert-playlist{
  border:0;
  border-radius:8px;
  cursor:pointer;
  font:700 11px/1 var(--rpl-font);
}

.rpl-add-track{
  padding:9px 11px;
  background:rgba(255,255,255,.08);
  color:#fff;
}

.rpl-track-form{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.35fr) 70px 34px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}

.rpl-track-form input{
  min-width:0;
  height:36px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  outline:0;
  background:#0f1110;
  color:#fff;
  font:11px/1 var(--rpl-font);
}

.rpl-track-form input:focus{
  border-color:rgba(255,255,255,.28);
}

.rpl-track-remove{
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  cursor:pointer;
}

.rpl-track-remove:hover{
  color:#fff;
  background:rgba(255,255,255,.11);
}

.rpl-track-form-labels{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.35fr) 70px 34px;
  gap:8px;
  margin-bottom:6px;
  color:rgba(255,255,255,.38);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.rpl-modal-footer{
  position:sticky;
  bottom:0;
  z-index:4;
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:15px 20px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(23,25,23,.96);
  backdrop-filter:blur(10px);
}

.rpl-modal-cancel{
  padding:11px 14px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  color:#fff;
  cursor:pointer;
  font:700 11px/1 var(--rpl-font);
}

.rpl-insert-playlist{
  padding:11px 15px;
  background:#f1f4f1;
  color:#161916;
}

@media (max-width:760px){
  .rpl-hero{
    min-height:0;
    align-items:flex-start;
    padding:18px;
  }

  .rpl-cover{
    width:112px;
    min-width:112px;
    height:112px;
  }

  .rpl-title{
    font-size:31px;
  }

  .rpl-track-head{
    display:none;
  }

  .rpl-track{
    grid-template-columns:38px minmax(0,1fr) 46px;
  }

  .rpl-album{
    display:none;
  }

  .rpl-duration{
    grid-column:3;
  }

  .rpl-grid{
    grid-template-columns:1fr;
  }

  .rpl-field.rpl-span-2{
    grid-column:auto;
  }

  .rpl-track-form-labels{
    display:none;
  }

  .rpl-track-form{
    grid-template-columns:1fr 1fr 34px;
    padding:10px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
  }

  .rpl-track-form input:nth-child(3),
  .rpl-track-form input:nth-child(4){
    grid-column:1/-1;
  }

  .rpl-track-form input:nth-child(5){
    grid-column:1/3;
  }
}

@media (max-width:520px){
  .rpl-hero{
    display:block;
  }

  .rpl-cover{
    margin-bottom:17px;
  }

  .rpl-body{
    padding:16px 12px 14px;
  }

  .rpl-track{
    padding-left:3px;
    padding-right:3px;
  }
}

/* =========================================================
   v1.7 — PLAYLIST EDITING + DIRECT AUDIO / MP3 URL
========================================================= */

.rpl-direct-audio{
  position:relative;
  min-width:0;
}

.rpl-audio-file-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.rpl-audio-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 55px;
  gap:5px;
}

.rpl-direct-upload,
.rpl-url-toggle{
  position:relative;
  height:36px;
  min-width:0;
  padding:0 8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:#0f1110;
  color:rgba(255,255,255,.68);
  cursor:pointer;
  font:700 9px/1 var(--rpl-font);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}

.rpl-direct-upload{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.rpl-url-toggle{
  display:grid;
  place-items:center;
  white-space:nowrap;
}

.rpl-direct-upload:hover,
.rpl-url-toggle:hover,
.rpl-url-toggle.is-on{
  border-color:rgba(255,255,255,.20);
  background:#131613;
  color:#fff;
}

.rpl-direct-upload:disabled{
  cursor:wait;
}

.rpl-upload-icon,
.rpl-upload-label{
  position:relative;
  z-index:2;
}

.rpl-upload-icon{
  flex:0 0 auto;
  font-size:13px;
  line-height:1;
}

.rpl-upload-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-upload-progress{
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  height:2px;
  background:rgba(255,255,255,.05);
}

.rpl-upload-progress-fill{
  display:block;
  width:0;
  height:100%;
  background:var(--rpl-accent,#1ed760);
  transition:width .15s linear;
}

.rpl-url-box{
  display:none;
  margin-top:5px;
}

.rpl-url-box.is-open{
  display:block;
}

.rpl-url-box .rpl-direct-url{
  width:100% !important;
  height:34px !important;
  padding:0 9px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
  background:#0b0d0b !important;
  color:#fff !important;
  font:10px/1 var(--rpl-font) !important;
}

.rpl-upload-file{
  display:none;
  max-width:100%;
  margin-top:4px;
  overflow:hidden;
  color:rgba(255,255,255,.34);
  font-size:8px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-track-form.is-uploading .rpl-direct-upload{
  border-color:rgba(255,255,255,.16);
  color:#fff;
}

.rpl-track-form.is-audio-loaded .rpl-direct-upload{
  border-color:color-mix(in srgb,var(--rpl-accent,#1ed760) 35%,transparent);
  color:var(--rpl-accent,#1ed760);
}

.rpl-track-form.is-audio-loaded .rpl-upload-file,
.rpl-track-form.has-upload-error .rpl-upload-file{
  display:block;
}

.rpl-track-form.has-upload-error .rpl-direct-upload{
  border-color:rgba(255,110,110,.35);
  color:#ffb2b2;
}

/* Editor: existing playlists become editable cards when a post is edited. */
.rpl-editor-playlists{
  margin:0 0 9px;
  padding:9px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:7px;
  background:rgba(255,255,255,.55);
  font-family:Arial,Helvetica,sans-serif;
}

.rpl-editor-playlists-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  color:#252525;
}

.rpl-editor-playlists-head strong{
  font-size:11px;
}

.rpl-editor-playlists-head span{
  color:#777;
  font-size:9px;
}

.rpl-editor-playlists-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.rpl-editor-playlist-edit{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  padding:7px 9px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:6px;
  background:#fff;
  color:#222;
  cursor:pointer;
  font:10px/1 Arial,Helvetica,sans-serif;
}

.rpl-editor-playlist-edit:hover{
  border-color:rgba(0,0,0,.22);
}

.rpl-editor-playlist-num{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#222;
  color:#fff;
  font-size:9px;
}

.rpl-editor-playlist-name{
  overflow:hidden;
  max-width:230px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rpl-editor-playlist-action{
  color:#8a8a8a;
  font-size:9px;
}

@media (max-width:760px){
  .rpl-track-form > .rpl-direct-audio{
    grid-column:1/-1;
  }

  .rpl-editor-playlists-head{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
}


/* =========================================================
   PLAYLIST BUTTON IN THE NATIVE EDITOR TOOLBAR
   ========================================================= */

[data-rpl-toolbar-button="1"]{
  cursor:pointer !important;
}

[data-rpl-toolbar-button="1"] .rpl-toolbar-playlist-icon{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  background:none !important;
  border:0 !important;
  font:700 15px/1 Arial,sans-serif !important;
  text-align:center !important;
  pointer-events:none !important;
}

/* Used only if the current forum theme has no native smile button to clone. */
.rpl-editor-btn{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin:0 2px 0 0;
  padding:0;
  border:1px solid rgba(0,0,0,.15);
  border-radius:0;
  background:#f2f2f2;
  color:#222;
  font:700 14px/1 Arial,sans-serif;
  cursor:pointer;
  vertical-align:middle;
}

.rpl-editor-btn:hover{
  background:#fff;
}


/* =========================================================
   AUDIO / PLAYLIST COMBINED TOOLBAR MENU
   ========================================================= */

/* Hide the old standalone audio button only after the combined
   button was successfully added by the playlist module. */
html.rpl-combined-media-ready #button-forum-audio{
  display:table-cell !important;
}

[data-rpl-toolbar-button="1"] .rpl-toolbar-playlist-icon{
  display:none !important;
}

[data-rpl-toolbar-button="1"] .rpl-toolbar-media-icon{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  background:none !important;
  border:0 !important;
  pointer-events:none !important;
}

[data-rpl-toolbar-button="1"] .rpl-toolbar-media-icon svg{
  display:block !important;
  width:17px !important;
  height:17px !important;
  margin:auto !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.65 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  pointer-events:none !important;
}

.rpl-toolbar-menu{
  position:fixed;
  z-index:999999;
  display:none;
  min-width:154px;
  padding:4px;
  background:#d2d2d2;
  border:1px solid #b9b9b9;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
  font-family:Arial,sans-serif;
}

.rpl-toolbar-menu.is-open{
  display:block;
}

.rpl-toolbar-menu-item{
  display:block;
  width:100%;
  height:25px;
  margin:0;
  padding:0 9px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#333;
  font:9px/25px Arial,sans-serif;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
}

.rpl-toolbar-menu-item + .rpl-toolbar-menu-item{
  border-top:1px solid rgba(0,0,0,.08);
}

.rpl-toolbar-menu-item:hover{
  background:#3f696b;
  color:#fff;
}


/* =========================================================
   RESONANCE — UNIFIED LIGHT POPUPS
   playlist constructor + audio/video upload
   ========================================================= */

/* ---------- playlist constructor ---------- */

html body .rpl-modal-backdrop{
  background:rgba(20,22,28,.22) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
}

html body .rpl-modal{
  width:min(850px,calc(100vw - 24px)) !important;
  max-height:min(86vh,900px) !important;
  border:1px solid #b9b9b9 !important;
  border-radius:0 !important;
  background:#d2d2d2 !important;
  color:#333 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
  font-family:Arial,sans-serif !important;
}

html body .rpl-modal-header{
  padding:12px 14px !important;
  border-bottom:1px solid #b5b5b5 !important;
  background:#c8c8c8 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html body .rpl-modal-title{
  color:#333 !important;
  font:700 12px/1.3 Arial,sans-serif !important;
  text-transform:uppercase !important;
}

html body .rpl-modal-close{
  width:25px !important;
  height:25px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#75523e !important;
  color:#fff !important;
  font:normal 18px/25px Arial,sans-serif !important;
}

html body .rpl-modal-close:hover{
  background:#654534 !important;
}

html body .rpl-modal-content{
  padding:14px !important;
}

html body .rpl-field label,
html body .rpl-track-form-labels{
  color:#606060 !important;
  font-family:Arial,sans-serif !important;
}

html body .rpl-field input,
html body .rpl-field textarea,
html body .rpl-track-form input{
  border:1px solid #aaa !important;
  border-radius:0 !important;
  background:#e2e2e2 !important;
  color:#333 !important;
  font-family:Arial,sans-serif !important;
}

html body .rpl-field input:focus,
html body .rpl-field textarea:focus,
html body .rpl-track-form input:focus{
  border-color:#3f696b !important;
}

html body .rpl-section-title{
  color:#333 !important;
}

html body .rpl-add-track,
html body .rpl-insert-playlist{
  border:0 !important;
  border-radius:0 !important;
  background:#3f696b !important;
  color:#fff !important;
  font-family:Arial,sans-serif !important;
  text-transform:uppercase !important;
}

html body .rpl-add-track:hover,
html body .rpl-insert-playlist:hover{
  background:#345b5d !important;
}

html body .rpl-track-remove{
  border:0 !important;
  border-radius:0 !important;
  background:#87534a !important;
  color:#fff !important;
}

html body .rpl-track-remove:hover{
  background:#73443c !important;
  color:#fff !important;
}

/* ---------- audio/video upload modal ---------- */

html body #forum-media-modal-v1{
  background:rgba(20,22,28,.22) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
}

html body #forum-media-modal-v1 .forum-media-dialog{
  width:min(430px,calc(100vw - 24px)) !important;
  padding:12px !important;
  border:1px solid #b9b9b9 !important;
  border-radius:0 !important;
  background:#d2d2d2 !important;
  color:#333 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
  font-family:Arial,sans-serif !important;
}

html body #forum-media-modal-v1 .forum-media-head{
  margin:0 0 10px !important;
  padding:0 0 8px !important;
  border-bottom:1px solid #b5b5b5 !important;
}

html body #forum-media-modal-v1 .forum-media-title{
  color:#333 !important;
  font:700 11px/1.3 Arial,sans-serif !important;
  text-transform:uppercase !important;
}

html body #forum-media-modal-v1 .forum-media-close{
  width:25px !important;
  height:25px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#75523e !important;
  color:#fff !important;
  font:normal 18px/25px Arial,sans-serif !important;
}

html body #forum-media-modal-v1 .forum-media-close:hover{
  background:#654534 !important;
}

html body #forum-media-modal-v1 .forum-media-file{
  color:#555 !important;
  font-family:Arial,sans-serif !important;
}

html body #forum-media-modal-v1 .forum-media-field > span{
  color:#606060 !important;
  font-family:Arial,sans-serif !important;
}

html body #forum-media-modal-v1 .forum-media-name,
html body #forum-media-modal-v1 .forum-media-caption{
  border:1px solid #aaa !important;
  border-radius:0 !important;
  background:#e2e2e2 !important;
  color:#333 !important;
  font-family:Arial,sans-serif !important;
  outline:none !important;
}

html body #forum-media-modal-v1 .forum-media-name:focus,
html body #forum-media-modal-v1 .forum-media-caption:focus{
  border-color:#3f696b !important;
}

html body #forum-media-modal-v1 .forum-media-status{
  color:#606060 !important;
  font-family:Arial,sans-serif !important;
}

html body #forum-media-modal-v1 .forum-media-progress{
  border-radius:0 !important;
  background:#b9b9b9 !important;
}

html body #forum-media-modal-v1 .forum-media-progress i{
  border-radius:0 !important;
  background:#3f696b !important;
}

html body #forum-media-modal-v1 .forum-media-actions{
  gap:6px !important;
}

html body #forum-media-modal-v1 .forum-media-cancel,
html body #forum-media-modal-v1 .forum-media-upload{
  height:25px !important;
  padding:0 9px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font:normal 8px/25px Arial,sans-serif !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}

html body #forum-media-modal-v1 .forum-media-cancel{
  background:#75523e !important;
  color:#fff !important;
}

html body #forum-media-modal-v1 .forum-media-cancel:hover{
  background:#654534 !important;
}

html body #forum-media-modal-v1 .forum-media-upload{
  background:#3f696b !important;
  color:#fff !important;
}

html body #forum-media-modal-v1 .forum-media-upload:hover{
  background:#345b5d !important;
}

html body #forum-media-modal-v1 .forum-media-upload:disabled{
  opacity:.45 !important;
  cursor:default !important;
}


/* =========================================================
   v2.3 FINAL — ORIGINAL AUDIO ICON + ROUNDED LIGHT UI
   ========================================================= */

/* The original fat audio icon stays as the trigger. */
html body #button-forum-audio{
  display:table-cell !important;
  cursor:pointer !important;
}

/* Compact popup under the audio icon. */
html body .rpl-toolbar-menu{
  min-width:156px !important;
  padding:5px !important;
  border:1px solid #b9b9b9 !important;
  border-radius:8px !important;
  background:#d2d2d2 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.20) !important;
  overflow:hidden !important;
}

html body .rpl-toolbar-menu-item{
  display:block !important;
  width:100% !important;
  height:27px !important;
  margin:0 !important;
  padding:0 9px !important;
  border:1px solid #b7b7b7 !important;
  border-radius:5px !important;
  background:#ececec !important;
  color:#333 !important;
  font:normal 9px/25px Arial,sans-serif !important;
  text-align:left !important;
  text-transform:uppercase !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}

html body .rpl-toolbar-menu-item + .rpl-toolbar-menu-item{
  margin-top:4px !important;
  border-top:1px solid #b7b7b7 !important;
}

html body .rpl-toolbar-menu-item:hover{
  border-color:#3f696b !important;
  background:#3f696b !important;
  color:#fff !important;
}

/* Playlist modal: rounded, light and consistent with the forum. */
html body .rpl-modal{
  border-radius:10px !important;
  overflow:hidden !important;
}

html body .rpl-modal-header{
  border-radius:10px 10px 0 0 !important;
}

html body .rpl-modal-content{
  background:#d2d2d2 !important;
}

html body .rpl-modal-footer{
  position:sticky !important;
  bottom:0 !important;
  padding:11px 14px !important;
  border-top:1px solid #b5b5b5 !important;
  border-radius:0 0 10px 10px !important;
  background:#c8c8c8 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html body .rpl-modal-close{
  border-radius:5px !important;
}

html body .rpl-field input,
html body .rpl-field textarea,
html body .rpl-track-form input{
  border-radius:5px !important;
}

html body .rpl-add-track,
html body .rpl-insert-playlist,
html body .rpl-modal-cancel{
  min-height:25px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:5px !important;
  box-shadow:none !important;
  font:normal 8px/25px Arial,sans-serif !important;
  text-transform:uppercase !important;
}

html body .rpl-add-track,
html body .rpl-insert-playlist{
  background:#3f696b !important;
  color:#fff !important;
}

html body .rpl-add-track:hover,
html body .rpl-insert-playlist:hover{
  background:#345b5d !important;
}

html body .rpl-modal-cancel{
  background:#75523e !important;
  color:#fff !important;
}

html body .rpl-modal-cancel:hover{
  background:#654534 !important;
}

html body .rpl-track-remove{
  border-radius:4px !important;
}

/* Audio/video upload modal uses the same rounded UI. */
html body #forum-media-modal-v1 .forum-media-dialog{
  border-radius:10px !important;
  overflow:hidden !important;
}

html body #forum-media-modal-v1 .forum-media-close,
html body #forum-media-modal-v1 .forum-media-cancel,
html body #forum-media-modal-v1 .forum-media-upload,
html body #forum-media-modal-v1 .forum-media-name,
html body #forum-media-modal-v1 .forum-media-caption{
  border-radius:5px !important;
}


/* =========================================================
   v2.5 — PLAYLIST: KEEP THE CINEMATIC LOOK,
   ADAPT IT TO THE FORUM WITHOUT KILLING COVER/BACKGROUND
   ========================================================= */

/* main card */

html body .rpl-playlist{
  --rpl-page:#101211 !important;
  --rpl-panel:#151816 !important;
  --rpl-text:#f5f5f2 !important;
  --rpl-muted:rgba(245,245,242,.62) !important;
  --rpl-line:rgba(255,255,255,.08) !important;

  width:100% !important;
  max-width:760px !important;
  margin:18px auto !important;

  border:1px solid rgba(117,82,62,.45) !important;
  border-radius:14px !important;

  background:#101211 !important;
  color:#f5f5f2 !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.015) inset !important;

  overflow:hidden !important;
}


/* IMPORTANT: restore the large header/background image */

html body .rpl-playlist::before{
  content:"" !important;

  position:absolute !important;
  z-index:-3 !important;

  inset:0 0 auto !important;

  height:430px !important;

  background-image:var(--rpl-bg-image) !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;

  opacity:1 !important;

  filter:none !important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    rgba(0,0,0,.94) 58%,
    rgba(0,0,0,.68) 72%,
    rgba(0,0,0,.24) 86%,
    transparent 100%
  ) !important;

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    rgba(0,0,0,.94) 58%,
    rgba(0,0,0,.68) 72%,
    rgba(0,0,0,.24) 86%,
    transparent 100%
  ) !important;
}


html body .rpl-playlist::after{
  content:"" !important;

  position:absolute !important;
  z-index:-2 !important;

  inset:0 0 auto !important;

  height:430px !important;

  background:linear-gradient(
    to bottom,
    rgba(8,10,9,.04) 0%,
    rgba(8,10,9,.08) 34%,
    rgba(9,11,10,.28) 52%,
    rgba(10,12,11,.62) 68%,
    rgba(14,16,15,.90) 84%,
    #101211 100%
  ) !important;

  pointer-events:none !important;
}


/* hero */

html body .rpl-hero{
  min-height:235px !important;

  display:flex !important;
  align-items:flex-end !important;

  gap:22px !important;

  padding:24px !important;

  background:transparent !important;
}


html body .rpl-hero::before{
  content:none !important;
  display:none !important;
}


/* square cover — do not hide or wash it out */

html body .rpl-cover{
  width:145px !important;
  min-width:145px !important;
  height:145px !important;

  overflow:hidden !important;

  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:12px !important;

  background:rgba(255,255,255,.08) !important;

  box-shadow:0 10px 25px rgba(0,0,0,.30) !important;
}


html body .rpl-cover img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  opacity:1 !important;

  filter:none !important;
}


html body .rpl-cover-empty{
  color:#d9d9d4 !important;

  background:rgba(255,255,255,.06) !important;

  font-size:42px !important;

  opacity:.80 !important;
}


/* meta */

html body .rpl-meta{
  align-items:flex-start !important;
  justify-content:flex-end !important;

  text-align:left !important;
}


html body .rpl-type{
  margin:0 0 8px !important;

  color:#d2b29b !important;

  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.15em !important;
}


html body .rpl-title{
  margin:0 0 3px !important;

  color:#fff !important;

  font-size:clamp(31px,5vw,48px) !important;
  line-height:.98 !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;

  text-shadow:0 2px 14px rgba(0,0,0,.28) !important;
}


html body .rpl-description{
  max-width:650px !important;

  margin-top:10px !important;

  color:rgba(255,255,255,.74) !important;

  font-size:12px !important;
  line-height:1.5 !important;
}


html body .rpl-info{
  gap:7px !important;

  margin-top:11px !important;

  color:rgba(255,255,255,.82) !important;

  font-size:10px !important;
}


html body .rpl-info strong{
  color:#fff !important;
}


/* body */

html body .rpl-body{
  padding:16px 18px 17px !important;

  background:linear-gradient(
    to bottom,
    rgba(15,18,16,.94),
    #101211 26%
  ) !important;
}


/* controls */

html body .rpl-controls{
  display:grid !important;

  grid-template-columns:46px 36px minmax(0,1fr) !important;

  gap:10px !important;

  align-items:center !important;

  margin:0 0 13px !important;

  padding:0 !important;

  background:transparent !important;

  border:0 !important;
}


/* stop forum-wide button positioning from moving them */

html body .rpl-btn,
html body .rpl-main-play,
html body .rpl-shuffle,
html body .rpl-track-play{
  position:static !important;

  inset:auto !important;

  float:none !important;

  margin:0 !important;

  transform:none !important;

  box-shadow:none !important;
}


html body .rpl-main-play{
  display:grid !important;

  place-items:center !important;

  width:46px !important;
  min-width:46px !important;
  height:46px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:8px !important;

  background:#3f696b !important;
  color:#fff !important;

  font:normal 16px/46px Arial,sans-serif !important;
}


html body .rpl-main-play:hover{
  background:#345b5d !important;

  transform:none !important;
  filter:none !important;
}


html body .rpl-shuffle{
  display:grid !important;

  place-items:center !important;

  width:36px !important;
  min-width:36px !important;
  height:36px !important;

  padding:0 !important;

  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:8px !important;

  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.68) !important;

  font:normal 15px/36px Arial,sans-serif !important;
}


html body .rpl-shuffle:hover,
html body .rpl-shuffle.is-on{
  border-color:#3f696b !important;

  background:#3f696b !important;
  color:#fff !important;
}


html body .rpl-now-title{
  color:#fff !important;

  font-size:12px !important;
  font-weight:700 !important;
}


html body .rpl-now-sub{
  margin-top:3px !important;

  color:rgba(255,255,255,.55) !important;

  font-size:9px !important;
}


html body .rpl-progress-row{
  grid-column:1/-1 !important;

  grid-template-columns:34px minmax(0,1fr) 34px !important;

  gap:8px !important;

  align-items:center !important;
}


html body .rpl-time{
  color:rgba(255,255,255,.54) !important;

  font-size:8px !important;
}


html body .rpl-progress{
  height:4px !important;

  border-radius:10px !important;

  background:rgba(255,255,255,.16) !important;
}


html body .rpl-progress-fill{
  border-radius:10px !important;

  background:#3f696b !important;
}


/* track table */

html body .rpl-track-head,
html body .rpl-track{
  grid-template-columns:40px minmax(0,1.6fr) minmax(100px,.85fr) 50px !important;

  gap:9px !important;
}


html body .rpl-track-head{
  min-height:30px !important;

  padding:0 7px !important;

  border-bottom:1px solid rgba(255,255,255,.08) !important;

  color:rgba(255,255,255,.38) !important;

  font-size:8px !important;
  letter-spacing:.10em !important;
}


html body .rpl-track{
  min-height:50px !important;

  padding:5px 7px !important;

  border-bottom:1px solid rgba(255,255,255,.045) !important;
  border-radius:7px !important;

  background:transparent !important;
}


html body .rpl-track:hover{
  background:rgba(255,255,255,.055) !important;
}


html body .rpl-track.is-active{
  background:rgba(63,105,107,.16) !important;
}


html body .rpl-track-number{
  color:rgba(255,255,255,.52) !important;

  font-size:10px !important;
}


html body .rpl-track-play{
  display:none !important;

  place-items:center !important;

  width:26px !important;
  min-width:26px !important;
  height:26px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:6px !important;

  background:#3f696b !important;
  color:#fff !important;

  font:normal 10px/26px Arial,sans-serif !important;
}


html body .rpl-track:hover .rpl-track-play,
html body .rpl-track.is-active .rpl-track-play{
  display:grid !important;
}


html body .rpl-song-title{
  color:#fff !important;

  font-size:11px !important;
  font-weight:700 !important;
}


html body .rpl-track.is-active .rpl-song-title{
  color:#9cc5c7 !important;
}


html body .rpl-song-artist,
html body .rpl-album,
html body .rpl-duration{
  color:rgba(255,255,255,.53) !important;

  font-size:9px !important;
}


html body .rpl-song-artist{
  margin-top:2px !important;
}


/* responsive */

@media screen and (max-width:650px){

  html body .rpl-playlist{
    max-width:100% !important;
  }

  html body .rpl-playlist::before,
  html body .rpl-playlist::after{
    height:330px !important;
  }

  html body .rpl-hero{
    min-height:190px !important;

    gap:14px !important;

    padding:16px !important;
  }

  html body .rpl-cover{
    width:95px !important;
    min-width:95px !important;
    height:95px !important;
  }

  html body .rpl-title{
    font-size:28px !important;
  }

  html body .rpl-track-head,
  html body .rpl-track{
    grid-template-columns:34px minmax(0,1fr) 46px !important;
  }

  html body .rpl-track-head > :nth-child(3),
  html body .rpl-track .rpl-album{
    display:none !important;
  }
}


/* =========================================================
   v2.6 — LIGHT PORTAL TOOLTIPS
   ========================================================= */

/* Disable the older nested version if it is still present in HTML-bottom. */
html body #button-forum-audio > .res-editor-tooltip,
html body #button-image2 > .res-editor-tooltip{
  display:none !important;
}

html body .res-editor-tooltip-portal{
  position:fixed !important;
  z-index:2147483647 !important;

  display:block !important;

  width:max-content !important;
  max-width:180px !important;

  padding:3px 9px !important;

  border:1px solid #c4c4c4 !important;
  border-radius:10px !important;

  background:#d9d9d9 !important;
  color:#777 !important;

  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;

  font:normal 9px/1.2 Arial,sans-serif !important;
  text-align:center !important;
  white-space:nowrap !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  transform:translateY(-2px) !important;

  transition:
    opacity .12s ease,
    transform .12s ease,
    visibility .12s ease !important;
}

html body .res-editor-tooltip-portal.is-open{
  opacity:1 !important;
  visibility:visible !important;

  transform:translateY(0) !important;
}


/* =========================================================
   v2.7 FINAL — WARM FORUM GRADIENT
   Это финальный слой. Он специально стоит В САМОМ КОНЦЕ,
   чтобы перекрыть старые черные варианты.
   ========================================================= */

/* ---------- ОСНОВНАЯ КАРТОЧКА ---------- */

html body .rpl-playlist{
  --rpl-page:#4a3d36 !important;
  --rpl-panel:#403631 !important;
  --rpl-text:#f6f0eb !important;
  --rpl-muted:rgba(246,240,235,.68) !important;
  --rpl-line:rgba(255,255,255,.11) !important;
  --rpl-accent:#4e7476 !important;

  width:100% !important;
  max-width:760px !important;
  margin:18px auto !important;

  overflow:hidden !important;
  isolation:isolate !important;

  border:1px solid rgba(105,82,67,.42) !important;
  border-radius:16px !important;

  background:
    linear-gradient(
      180deg,
      #665044 0%,
      #57463e 32%,
      #4d4039 58%,
      #453a35 78%,
      #403631 100%
    ) !important;

  color:#f6f0eb !important;

  box-shadow:
    0 12px 28px rgba(63,48,39,.18),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
}


/* ---------- ФОН ШАПКИ ---------- */

html body .rpl-playlist::before{
  content:"" !important;

  position:absolute !important;
  z-index:-3 !important;

  inset:0 0 auto !important;

  height:450px !important;

  pointer-events:none !important;

  background-image:var(--rpl-bg-image) !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;

  opacity:1 !important;
  filter:none !important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.94) 52%,
    rgba(0,0,0,.78) 63%,
    rgba(0,0,0,.54) 74%,
    rgba(0,0,0,.30) 84%,
    rgba(0,0,0,.10) 92%,
    transparent 100%
  ) !important;

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.94) 52%,
    rgba(0,0,0,.78) 63%,
    rgba(0,0,0,.54) 74%,
    rgba(0,0,0,.30) 84%,
    rgba(0,0,0,.10) 92%,
    transparent 100%
  ) !important;
}


/* Главный переход: НЕ в черный, а в теплый цвет карточки */

html body .rpl-playlist::after{
  content:"" !important;

  position:absolute !important;
  z-index:-2 !important;

  inset:0 0 auto !important;

  height:450px !important;

  pointer-events:none !important;

  background:linear-gradient(
    to bottom,
    rgba(86,61,47,.05) 0%,
    rgba(92,67,52,.12) 24%,
    rgba(88,66,55,.26) 42%,
    rgba(81,64,56,.44) 56%,
    rgba(73,59,53,.63) 69%,
    rgba(68,56,51,.80) 82%,
    rgba(64,54,49,.94) 94%,
    #403631 100%
  ) !important;
}


/* ---------- HERO ---------- */

html body .rpl-hero{
  position:relative !important;

  min-height:235px !important;

  display:flex !important;
  align-items:flex-end !important;

  gap:22px !important;

  padding:24px !important;

  background:transparent !important;
}


html body .rpl-hero::before{
  content:none !important;
  display:none !important;
}


/* ---------- ОБЛОЖКА ---------- */

html body .rpl-cover{
  width:145px !important;
  min-width:145px !important;
  height:145px !important;

  overflow:hidden !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;

  background:rgba(255,255,255,.10) !important;

  box-shadow:0 10px 24px rgba(45,34,28,.22) !important;
}


html body .rpl-cover img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  border-radius:13px !important;

  opacity:1 !important;
  filter:none !important;
}


html body .rpl-cover-empty{
  display:grid !important;
  place-items:center !important;

  width:100% !important;
  height:100% !important;

  background:rgba(255,255,255,.08) !important;

  color:#eee4dc !important;

  font-size:40px !important;

  opacity:1 !important;
}


/* ---------- ТЕКСТ ШАПКИ ---------- */

html body .rpl-meta{
  min-width:0 !important;

  flex:1 !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:flex-start !important;
  justify-content:flex-end !important;

  text-align:left !important;
}


html body .rpl-type{
  margin:0 0 7px !important;

  color:#d6b49e !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:800 !important;

  letter-spacing:.15em !important;

  text-transform:uppercase !important;
}


html body .rpl-title{
  display:block !important;

  position:static !important;
  float:none !important;

  width:100% !important;
  max-width:100% !important;

  margin:0 0 3px !important;
  padding:0 !important;

  border:0 !important;

  background:none !important;

  color:#fffaf6 !important;

  font-family:var(--rpl-font) !important;
  font-size:clamp(31px,5vw,47px) !important;
  line-height:.98 !important;
  font-weight:800 !important;
  font-style:normal !important;

  letter-spacing:-.035em !important;

  text-align:left !important;
  text-decoration:none !important;
  text-transform:none !important;

  text-shadow:0 2px 12px rgba(45,31,24,.20) !important;

  overflow-wrap:anywhere !important;
}


html body .rpl-description{
  max-width:650px !important;

  margin-top:9px !important;

  color:rgba(255,247,242,.76) !important;

  font-size:11px !important;
  line-height:1.5 !important;
}


html body .rpl-info{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;

  gap:7px !important;

  margin-top:10px !important;

  color:rgba(255,247,242,.86) !important;

  font-size:10px !important;
}


html body .rpl-info strong{
  color:#fffaf6 !important;
}


html body .rpl-dot{
  opacity:.52 !important;
}


/* ---------- НИЗ ПЛЕЙЛИСТА ---------- */

html body .rpl-body{
  position:relative !important;

  padding:16px 18px 17px !important;

  background:
    linear-gradient(
      180deg,
      rgba(68,56,51,.55) 0%,
      rgba(66,55,50,.78) 18%,
      rgba(64,54,49,.92) 48%,
      #403631 100%
    ) !important;
}


html body .rpl-body::before{
  content:none !important;
  display:none !important;
}


/* ---------- CONTROLS ---------- */

html body .rpl-controls{
  display:grid !important;

  grid-template-columns:44px 34px minmax(0,1fr) !important;

  gap:9px !important;

  align-items:center !important;

  margin:0 0 12px !important;
  padding:0 !important;

  background:transparent !important;

  border:0 !important;
}


html body .rpl-btn,
html body .rpl-main-play,
html body .rpl-shuffle,
html body .rpl-track-play{
  position:static !important;

  inset:auto !important;

  float:none !important;

  margin:0 !important;

  transform:none !important;

  box-shadow:none !important;
}


html body .rpl-main-play{
  display:grid !important;

  place-items:center !important;

  width:44px !important;
  min-width:44px !important;
  height:44px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:9px !important;

  background:#4e7476 !important;
  color:#fff !important;

  font:normal 15px/44px Arial,sans-serif !important;
}


html body .rpl-main-play:hover{
  background:#426568 !important;

  transform:none !important;
  filter:none !important;
}


html body .rpl-shuffle{
  display:grid !important;

  place-items:center !important;

  width:34px !important;
  min-width:34px !important;
  height:34px !important;

  padding:0 !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:9px !important;

  background:rgba(255,255,255,.08) !important;
  color:rgba(255,247,242,.76) !important;

  font:normal 14px/34px Arial,sans-serif !important;
}


html body .rpl-shuffle:hover,
html body .rpl-shuffle.is-on{
  border-color:#4e7476 !important;

  background:#4e7476 !important;
  color:#fff !important;
}


html body .rpl-now{
  min-width:0 !important;
}


html body .rpl-now-title{
  overflow:hidden !important;

  color:#fffaf6 !important;

  font-size:11px !important;
  font-weight:700 !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


html body .rpl-now-sub{
  overflow:hidden !important;

  margin-top:2px !important;

  color:rgba(255,247,242,.60) !important;

  font-size:9px !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


html body .rpl-progress-row{
  grid-column:1/-1 !important;

  display:grid !important;

  grid-template-columns:32px minmax(0,1fr) 32px !important;

  gap:8px !important;

  align-items:center !important;
}


html body .rpl-time{
  color:rgba(255,247,242,.54) !important;

  font-size:8px !important;
}


html body .rpl-time:last-child{
  text-align:right !important;
}


html body .rpl-progress{
  position:relative !important;

  height:4px !important;

  overflow:hidden !important;

  border-radius:20px !important;

  background:rgba(255,255,255,.17) !important;

  cursor:pointer !important;
}


html body .rpl-progress-fill{
  position:absolute !important;

  inset:0 auto 0 0 !important;

  width:0;

  border-radius:inherit !important;

  background:#83a6a7 !important;

  pointer-events:none !important;
}


/* ---------- ТАБЛИЦА ТРЕКОВ ---------- */

html body .rpl-track-head,
html body .rpl-track{
  display:grid !important;

  grid-template-columns:38px minmax(0,1.6fr) minmax(95px,.85fr) 48px !important;

  gap:9px !important;

  align-items:center !important;
}


html body .rpl-track-head{
  min-height:29px !important;

  padding:0 7px !important;

  border-bottom:1px solid rgba(255,255,255,.10) !important;

  color:rgba(255,242,233,.45) !important;

  font-size:8px !important;

  text-transform:uppercase !important;

  letter-spacing:.09em !important;
}


html body .rpl-track-head > :first-child{
  text-align:center !important;
}


html body .rpl-track-head > :last-child{
  text-align:right !important;
}


html body .rpl-track{
  position:relative !important;

  min-height:49px !important;

  padding:5px 7px !important;

  border-bottom:1px solid rgba(255,255,255,.055) !important;
  border-radius:9px !important;

  background:transparent !important;

  transition:background .15s ease !important;
}


html body .rpl-track:hover{
  background:rgba(255,255,255,.055) !important;
}


html body .rpl-track.is-active{
  background:rgba(78,116,118,.18) !important;
}


html body .rpl-track-number{
  display:grid !important;

  place-items:center !important;

  color:rgba(255,247,242,.54) !important;

  font-size:10px !important;
}


html body .rpl-track-play{
  display:none !important;

  place-items:center !important;

  width:25px !important;
  min-width:25px !important;
  height:25px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:6px !important;

  background:#4e7476 !important;
  color:#fff !important;

  font:normal 10px/25px Arial,sans-serif !important;
}


html body .rpl-track:hover .rpl-index,
html body .rpl-track.is-active .rpl-index{
  display:none !important;
}


html body .rpl-track:hover .rpl-track-play,
html body .rpl-track.is-active .rpl-track-play{
  display:grid !important;
}


html body .rpl-song{
  min-width:0 !important;
}


html body .rpl-song-title{
  overflow:hidden !important;

  color:#fffaf6 !important;

  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.35 !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


html body .rpl-track.is-active .rpl-song-title{
  color:#b9d1d2 !important;
}


html body .rpl-song-artist,
html body .rpl-album,
html body .rpl-duration{
  overflow:hidden !important;

  color:rgba(255,247,242,.60) !important;

  font-size:9px !important;
  line-height:1.35 !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


html body .rpl-song-artist{
  margin-top:2px !important;
}


html body .rpl-duration{
  text-align:right !important;
}


/* ---------- КОНСТРУКТОР ---------- */

html body .rpl-modal-backdrop{
  background:rgba(68,58,52,.20) !important;

  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}


html body .rpl-modal{
  border:1px solid #bbb4ad !important;
  border-radius:14px !important;

  background:#d8d6d3 !important;
  color:#39332f !important;

  box-shadow:0 16px 42px rgba(68,52,42,.22) !important;

  overflow:auto !important;
}


html body .rpl-modal-header{
  border-bottom:1px solid #c2bcb6 !important;
  border-radius:14px 14px 0 0 !important;

  background:#cbc8c4 !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


html body .rpl-modal-title{
  color:#493b33 !important;

  font-family:Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;

  text-transform:uppercase !important;
}


html body .rpl-modal-close{
  width:25px !important;
  height:25px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:6px !important;

  background:#815c48 !important;
  color:#fff !important;

  font:normal 18px/25px Arial,sans-serif !important;
}


html body .rpl-modal-close:hover{
  background:#704c3a !important;
}


html body .rpl-modal-content{
  padding:15px !important;

  background:#d8d6d3 !important;
}


html body .rpl-field label{
  color:#665a52 !important;

  font-family:Arial,sans-serif !important;
}


html body .rpl-field input,
html body .rpl-field textarea,
html body .rpl-track-form input{
  border:1px solid #aaa5a0 !important;
  border-radius:7px !important;

  background:#ecebea !important;
  color:#333 !important;

  font-family:Arial,sans-serif !important;
}


html body .rpl-field input:focus,
html body .rpl-field textarea:focus,
html body .rpl-track-form input:focus{
  border-color:#4e7476 !important;
}


html body .rpl-section-title{
  color:#493b33 !important;
}


html body .rpl-track-form-labels{
  color:#746a63 !important;
}


html body .rpl-add-track,
html body .rpl-insert-playlist{
  border:0 !important;
  border-radius:7px !important;

  background:#4e7476 !important;
  color:#fff !important;

  box-shadow:none !important;

  font-family:Arial,sans-serif !important;
}


html body .rpl-add-track:hover,
html body .rpl-insert-playlist:hover{
  background:#426568 !important;
}


html body .rpl-direct-upload,
html body .rpl-url-toggle{
  border:1px solid #4e7476 !important;
  border-radius:7px !important;

  background:#4e7476 !important;
  color:#fff !important;
}


html body .rpl-direct-upload:hover,
html body .rpl-url-toggle:hover,
html body .rpl-url-toggle.is-on{
  border-color:#426568 !important;

  background:#426568 !important;
  color:#fff !important;
}


html body .rpl-url-box .rpl-direct-url{
  border:1px solid #aaa5a0 !important;
  border-radius:7px !important;

  background:#ecebea !important;
  color:#333 !important;
}


html body .rpl-track-remove{
  border-radius:6px !important;

  background:#93604c !important;
  color:#fff !important;
}


html body .rpl-track-remove:hover{
  background:#804f3e !important;
  color:#fff !important;
}


html body .rpl-modal-footer{
  border-top:1px solid #c2bcb6 !important;
  border-radius:0 0 14px 14px !important;

  background:#c4c0bc !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


html body .rpl-modal-cancel{
  border-radius:7px !important;

  background:#815c48 !important;
  color:#fff !important;
}


html body .rpl-modal-cancel:hover{
  background:#704c3a !important;
}


/* ---------- AUDIO / VIDEO UPLOAD POPUP ---------- */

html body #forum-media-modal-v1{
  background:rgba(68,58,52,.20) !important;

  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}


html body #forum-media-modal-v1 .forum-media-dialog{
  border:1px solid #bbb4ad !important;
  border-radius:14px !important;

  background:#d8d6d3 !important;
  color:#39332f !important;

  box-shadow:0 16px 42px rgba(68,52,42,.22) !important;
}


html body #forum-media-modal-v1 .forum-media-head{
  border-bottom:1px solid #c2bcb6 !important;
}


html body #forum-media-modal-v1 .forum-media-title{
  color:#493b33 !important;
}


html body #forum-media-modal-v1 .forum-media-close{
  border-radius:6px !important;

  background:#815c48 !important;
  color:#fff !important;
}


html body #forum-media-modal-v1 .forum-media-name,
html body #forum-media-modal-v1 .forum-media-caption{
  border:1px solid #aaa5a0 !important;
  border-radius:7px !important;

  background:#ecebea !important;
  color:#333 !important;
}


html body #forum-media-modal-v1 .forum-media-progress{
  background:#b9b3ad !important;
}


html body #forum-media-modal-v1 .forum-media-progress i{
  background:#4e7476 !important;
}


html body #forum-media-modal-v1 .forum-media-cancel{
  border-radius:7px !important;

  background:#815c48 !important;
  color:#fff !important;
}


html body #forum-media-modal-v1 .forum-media-upload{
  border-radius:7px !important;

  background:#4e7476 !important;
  color:#fff !important;
}


/* ---------- ВЫПАДАЮЩЕЕ МЕНЮ АУДИО / ПЛЕЙЛИСТ ---------- */

html body .rpl-toolbar-menu{
  min-width:156px !important;

  padding:5px !important;

  border:1px solid #b9b3ad !important;
  border-radius:8px !important;

  background:#d8d6d3 !important;

  box-shadow:0 5px 14px rgba(68,52,42,.16) !important;
}


html body .rpl-toolbar-menu-item{
  height:27px !important;

  padding:0 9px !important;

  border:1px solid #bbb5af !important;
  border-radius:6px !important;

  background:#ecebea !important;
  color:#443b35 !important;

  font:normal 9px/25px Arial,sans-serif !important;

  text-transform:uppercase !important;
}


html body .rpl-toolbar-menu-item + .rpl-toolbar-menu-item{
  margin-top:4px !important;
}


html body .rpl-toolbar-menu-item:hover{
  border-color:#4e7476 !important;

  background:#4e7476 !important;
  color:#fff !important;
}


/* ---------- TOOLTIP ---------- */

html body .res-editor-tooltip-portal{
  border:1px solid #c4beb8 !important;
  border-radius:10px !important;

  background:#dedbd8 !important;
  color:#746b64 !important;

  box-shadow:0 2px 6px rgba(68,52,42,.08) !important;
}


/* ---------- MOBILE ---------- */

@media screen and (max-width:650px){

  html body .rpl-playlist{
    max-width:100% !important;

    border-radius:12px !important;
  }

  html body .rpl-playlist::before,
  html body .rpl-playlist::after{
    height:340px !important;
  }

  html body .rpl-hero{
    min-height:190px !important;

    gap:14px !important;

    padding:16px !important;
  }

  html body .rpl-cover{
    width:95px !important;
    min-width:95px !important;
    height:95px !important;
  }

  html body .rpl-title{
    font-size:28px !important;
  }

  html body .rpl-track-head,
  html body .rpl-track{
    grid-template-columns:34px minmax(0,1fr) 46px !important;
  }

  html body .rpl-track-head > :nth-child(3),
  html body .rpl-track .rpl-album{
    display:none !important;
  }
}


/* =========================================================
   v2.8 FINAL — COOL FORUM GRADIENT, NO VISIBLE SEAM
   ========================================================= */

/* Основной тон: холодный графитово-бирюзовый, без коричневого */
html body .rpl-playlist{
  --rpl-page:#394344 !important;
  --rpl-panel:#394344 !important;
  --rpl-text:#f4f5f4 !important;
  --rpl-muted:rgba(244,245,244,.66) !important;
  --rpl-line:rgba(255,255,255,.09) !important;
  --rpl-accent:#4f7779 !important;

  background:#394344 !important;
  border:1px solid rgba(63,105,107,.28) !important;
  box-shadow:
    0 12px 28px rgba(31,39,40,.18),
    0 0 0 1px rgba(255,255,255,.018) inset !important;
}

/* Фон тянется на ВСЮ карточку, поэтому больше нет места,
   где один блок резко заканчивается и начинается другой. */
html body .rpl-playlist::before{
  inset:0 !important;
  height:auto !important;

  background-image:var(--rpl-bg-image) !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;

  opacity:1 !important;
  filter:none !important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 36%,
    rgba(0,0,0,.96) 45%,
    rgba(0,0,0,.84) 56%,
    rgba(0,0,0,.66) 67%,
    rgba(0,0,0,.45) 78%,
    rgba(0,0,0,.24) 88%,
    rgba(0,0,0,.08) 96%,
    transparent 100%
  ) !important;

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 36%,
    rgba(0,0,0,.96) 45%,
    rgba(0,0,0,.84) 56%,
    rgba(0,0,0,.66) 67%,
    rgba(0,0,0,.45) 78%,
    rgba(0,0,0,.24) 88%,
    rgba(0,0,0,.08) 96%,
    transparent 100%
  ) !important;
}

/* Один непрерывный холодный градиент поверх всей карточки.
   Конечный цвет ТОЧНО совпадает с фоном .rpl-playlist. */
html body .rpl-playlist::after{
  inset:0 !important;
  height:auto !important;

  background:linear-gradient(
    to bottom,
    rgba(40,52,53,.04) 0%,
    rgba(42,55,56,.10) 24%,
    rgba(45,58,59,.22) 40%,
    rgba(48,60,61,.38) 52%,
    rgba(51,63,64,.56) 64%,
    rgba(54,65,66,.72) 76%,
    rgba(56,67,68,.88) 89%,
    #394344 100%
  ) !important;
}

/* Никакого отдельного фона у нижнего блока:
   именно он и давал заметную границу. */
html body .rpl-body{
  background:transparent !important;
}

/* Текст / акценты */
html body .rpl-type{
  color:#b9d0d1 !important;
}

html body .rpl-title,
html body .rpl-info strong,
html body .rpl-now-title,
html body .rpl-song-title{
  color:#f7f8f7 !important;
}

html body .rpl-description,
html body .rpl-info,
html body .rpl-now-sub,
html body .rpl-song-artist,
html body .rpl-album,
html body .rpl-duration,
html body .rpl-track-number,
html body .rpl-time{
  color:rgba(240,244,244,.66) !important;
}

/* Обложка — нейтральная, без теплой коричневой рамки */
html body .rpl-cover{
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 10px 24px rgba(25,34,35,.24) !important;
}

/* Кнопки */
html body .rpl-main-play,
html body .rpl-track-play,
html body .rpl-shuffle:hover,
html body .rpl-shuffle.is-on{
  background:#4f7779 !important;
  color:#fff !important;
}

html body .rpl-main-play:hover,
html body .rpl-track-play:hover{
  background:#42686a !important;
}

html body .rpl-shuffle{
  border-color:rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.07) !important;
  color:rgba(245,248,248,.74) !important;
}

html body .rpl-progress{
  background:rgba(255,255,255,.15) !important;
}

html body .rpl-progress-fill{
  background:#86aaab !important;
}

/* Треки */
html body .rpl-track-head{
  border-bottom-color:rgba(255,255,255,.09) !important;
  color:rgba(234,241,241,.43) !important;
}

html body .rpl-track{
  border-bottom-color:rgba(255,255,255,.045) !important;
  background:transparent !important;
}

html body .rpl-track:hover{
  background:rgba(255,255,255,.045) !important;
}

html body .rpl-track.is-active{
  background:rgba(79,119,121,.15) !important;
}

html body .rpl-track.is-active .rpl-song-title{
  color:#b8d2d3 !important;
}

/* На мобильном принцип тот же: никакого отдельного шва */
@media screen and (max-width:650px){
  html body .rpl-playlist::before,
  html body .rpl-playlist::after{
    inset:0 !important;
    height:auto !important;
  }
}


/* =========================================================
   v2.9 — TYPOGRAPHY FINAL
   ========================================================= */

html body .rpl-title{
  font-size:clamp(36px,5.5vw,54px) !important;
  line-height:.96 !important;
}

html body .rpl-now-title{
  font-size:13px !important;
  line-height:1.3 !important;
}

@media screen and (max-width:650px){
  html body .rpl-title{
    font-size:32px !important;
  }

  html body .rpl-now-title{
    font-size:12px !important;
  }
}