.player-customization-future {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border, #d8e4ef);
}

.player-customization-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.player-customization-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.player-customization-title-row h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text, #10213a);
}

.player-customization-heading p {
  margin: 6px 0 0;
  color: var(--muted, #6e8099);
  font-size: 14px;
}

.future-feature-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid #cbd8e5;
  border-radius: 999px;
  background: #f6f9fc;
  color: #60748f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.player-customization-free-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 13px 15px;
  margin-bottom: 16px;
  border: 1px solid #d9e4ef;
  border-radius: 13px;
  background: #f6f9fc;
  color: #60748f;
  font-size: 13px;
}

.player-customization-free-note strong {
  color: #243953;
}

.player-customization-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 18px;
  align-items: start;
}

.player-customization-controls,
.player-customization-preview-wrap {
  position: sticky;
  top: 18px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d5e1ec;
  border-radius: 15px;
  background: #f5f8fb;
}


/* V260 — единый стиль элементов управления кастомизацией */
.player-customization-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  border: 1px solid var(--account-border, #d5e1ec);
  border-radius: 13px;
  background: var(--account-surface-soft, #eef4f8);
}

.player-customization-mode button {
  min-width: 0;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--account-muted, #60748f);
  font: 900 13px/1.25 Nunito, sans-serif;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.player-customization-mode button:hover {
  color: var(--account-accent, #087ac1);
  background: color-mix(in srgb, var(--account-accent, #087ac1) 7%, transparent);
}

.player-customization-mode button.is-active {
  border-color: color-mix(in srgb, var(--account-accent, #087ac1) 34%, var(--account-border, #d5e1ec));
  background: var(--account-surface, #fff);
  color: var(--account-accent, #087ac1);
  box-shadow: 0 3px 12px rgba(36, 74, 109, .11);
}

.player-customization-mode button:focus-visible,
.player-upload-button:focus-visible,
.player-customization-actions button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--account-accent, #087ac1) 22%, transparent);
  outline-offset: 2px;
}

.player-customization-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.player-customization-field > span {
  color: var(--account-text, var(--text, #10213a));
  font: 900 13px/1.3 Nunito, sans-serif;
}

.player-customization-field small,
.player-customization-upload small,
.player-customization-color small {
  color: var(--account-muted, var(--muted, #6e8099));
  font: 700 12px/1.4 Nunito, sans-serif;
}

.player-customization-field input,
.player-customization-field select,
.player-color-control input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--account-border, #ccdae7);
  border-radius: 11px;
  background: var(--account-surface, #fff);
  color: var(--account-text, #142841);
  font: 800 14px/1.3 Nunito, sans-serif;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.player-customization-field input::placeholder {
  color: color-mix(in srgb, var(--account-muted, #6e8099) 76%, transparent);
}

.player-customization-field input:focus,
.player-customization-field select:focus,
.player-color-control input[type="text"]:focus {
  outline: 0;
  border-color: var(--account-accent, #087ac1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-accent, #087ac1) 16%, transparent);
}

.player-customization-text-grid,
.player-customization-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.player-customization-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--account-border, #d5e1ec);
  border-radius: 13px;
  background: var(--account-surface, #f8fafc);
}

.player-customization-upload > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.player-customization-upload strong {
  color: var(--account-text, #142841);
  font: 900 13px/1.3 Nunito, sans-serif;
}

.player-customization-upload input[type="file"] {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.player-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--account-border, #b8cbe0);
  border-radius: 10px;
  background: var(--account-surface, #fff);
  color: var(--account-accent, #087ac1);
  font: 900 13px/1 Nunito, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 35, 63, .04);
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.player-upload-button::before {
  content: "↑";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--account-accent, #087ac1) 11%, transparent);
  font-size: 12px;
}

.player-upload-button:hover {
  border-color: color-mix(in srgb, var(--account-accent, #087ac1) 56%, var(--account-border, #b8cbe0));
  background: color-mix(in srgb, var(--account-accent, #087ac1) 6%, var(--account-surface, #fff));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 35, 63, .08);
}

.player-file-status {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--account-muted, #6e8099);
  font: 700 12px/1.35 Nunito, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-file-status.is-error {
  color: #c23e3e;
  font-weight: 900;
}

.player-file-status.is-valid {
  color: #158044;
  font-weight: 900;
}

.player-customization-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  margin-top: 14px;
  border: 1px solid var(--account-border, #d5e1ec);
  border-radius: 13px;
  background: var(--account-surface, #f8fafc);
}

.player-customization-color > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.player-customization-color strong {
  color: var(--account-text, #142841);
  font: 900 13px/1.3 Nunito, sans-serif;
}

.player-color-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.player-color-control input[type="color"] {
  inline-size: 48px;
  block-size: 43px;
  padding: 4px;
  border: 1px solid var(--account-border, #ccdae7);
  border-radius: 10px;
  background: var(--account-surface, #fff);
  cursor: pointer;
}

.player-color-control input[type="text"] {
  inline-size: 104px;
  text-transform: uppercase;
}

.player-customization-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 2px;
}

.player-customization-actions .secondary-button {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: Nunito, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.player-customization-actions span {
  flex: 1 1 260px;
  color: var(--account-muted, #74859a);
  font: 700 12px/1.45 Nunito, sans-serif;
}

.player-customization-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #60748f;
  font-size: 12px;
  font-weight: 800;
}

.player-customization-preview-label b {
  color: #087ac1;
  font-size: 11px;
}

.player-embed-preview {
  --player-preview-accent: #8b5cf6;
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2d3037;
  border-radius: 6px;
  background: #1d1f24;
  color: #f4f5f7;
  box-shadow: 0 12px 28px rgba(15, 22, 33, .22);
}

.player-preview-accent {
  background: var(--player-preview-accent);
}

.player-preview-content {
  min-width: 0;
  padding: 16px 16px 12px;
}

.player-preview-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 18px;
  align-items: start;
}

.player-preview-copy {
  min-width: 0;
}

.player-preview-copy h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 0 13px;
  color: #f7f7f8;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.player-preview-copy h5 span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-preview-info-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 8px;
}

.player-preview-info-icon {
  font-size: 18px;
  line-height: 1.2;
}

.player-preview-info-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.player-preview-info-row strong,
.player-preview-info-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-preview-info-row strong {
  color: #f3f3f4;
  font-size: 15px;
  line-height: 1.2;
}

.player-preview-info-row span:last-child {
  color: #f0f0f1;
  font-size: 14px;
  line-height: 1.3;
}

.player-preview-status-row {
  margin-top: 16px;
}

.player-preview-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 82px;
  block-size: 82px;
  overflow: hidden;
  border-radius: 5px;
  background: #f3e8cf;
  color: #16191f;
  font-size: 18px;
  font-weight: 900;
}

.player-preview-logo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.player-preview-logo.has-text-fallback::before {
  content: attr(data-fallback);
}

.player-preview-loading {
  display: grid;
  gap: 4px;
  margin: 18px 0 14px;
  color: #f5f5f6;
}

.player-preview-loading em {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-preview-loading span {
  overflow: hidden;
  max-width: 100%;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

.player-preview-banner {
  width: min(100%, 640px);
  overflow: hidden;
  border-radius: 5px;
  background: #090a0d;
}

.player-preview-banner img,
.player-preview-banner video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 1;
  object-fit: cover;
}

.player-preview-banner [hidden] {
  display: none !important;
}

.player-preview-footer {
  overflow: hidden;
  margin-top: 11px;
  color: #f1f1f2;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] .future-feature-badge,
html[data-theme="dark"] .player-customization-free-note,
html[data-theme="dark"] .player-customization-mode,
html[data-theme="dark"] .player-customization-upload,
html[data-theme="dark"] .player-customization-color,
html[data-theme="dark"] .player-customization-preview-wrap {
  border-color: #33465f;
  background: #17243a;
}

html[data-theme="dark"] .player-customization-mode button.is-active,
html[data-theme="dark"] .player-customization-field input,
html[data-theme="dark"] .player-customization-field select,
html[data-theme="dark"] .player-color-control input,
html[data-theme="dark"] .player-upload-button {
  border-color: #3c506b;
  background-color: #111d30;
  color: #e6eef8;
}

html[data-theme="dark"] .player-customization-title-row h4,
html[data-theme="dark"] .player-customization-free-note strong,
html[data-theme="dark"] .player-customization-field > span,
html[data-theme="dark"] .player-customization-upload strong,
html[data-theme="dark"] .player-customization-color strong {
  color: #eef5ff;
}

@media (max-width: 1100px) {
  .player-customization-grid {
    grid-template-columns: 1fr;
  }

  .player-customization-preview-wrap {
    position: static;
  }
}

@media (max-width: 620px) {
  .player-customization-future {
    margin-top: 18px;
    padding-top: 18px;
  }

  .player-customization-text-grid,
  .player-customization-upload-grid {
    grid-template-columns: 1fr;
  }

  .player-customization-mode {
    grid-template-columns: 1fr;
  }

  .player-customization-color {
    align-items: flex-start;
    flex-direction: column;
  }

  .player-color-control {
    width: 100%;
  }

  .player-color-control input[type="text"] {
    flex: 1 1 auto;
    inline-size: auto;
  }

  .player-customization-preview-wrap {
    padding: 10px;
  }

  .player-preview-content {
    padding: 13px 12px 11px;
  }

  .player-preview-topline {
    grid-template-columns: minmax(0, 1fr) 66px;
    gap: 12px;
  }

  .player-preview-logo {
    inline-size: 66px;
    block-size: 66px;
  }

  .player-preview-copy h5 {
    font-size: 16px;
  }

  .player-preview-info-row strong {
    font-size: 13px;
  }

  .player-preview-info-row span:last-child {
    font-size: 12px;
  }

  .player-preview-loading {
    margin-top: 14px;
  }
}

@media (max-width: 620px) {
  .player-customization-upload {
    grid-template-columns: 1fr;
  }

  .player-upload-button {
    width: 100%;
  }

  .player-file-status {
    grid-column: auto;
  }

  .player-customization-actions .secondary-button {
    width: 100%;
  }
}

/* v270 — working Premium player customization. */
.player-customization-live .future-feature-badge{display:none!important}
.player-customization-enable{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;margin:14px 0;border:1px solid rgba(99,102,241,.16);border-radius:14px;background:rgba(99,102,241,.045)}
.player-customization-enable>span:first-child{display:grid;gap:4px}.player-customization-enable strong{font-size:14px}.player-customization-enable small{font-size:12px;color:var(--account-muted)}
.player-upload-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.player-media-default{min-height:38px;padding:0 13px;border:1px solid var(--account-border);border-radius:10px;background:var(--account-surface);color:var(--account-text);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.18s ease}
.player-media-default:hover{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.06)}
.player-customization-save-actions{align-items:center;flex-wrap:wrap}.player-customization-save-actions .primary,.player-customization-save-actions .discard-unsaved-button{min-height:42px}
.player-customization-save-actions .api-form-message{flex:1 1 260px;min-width:0}.player-customization-save-actions .api-form-message.is-error{color:#dc2626}.player-customization-save-actions .api-form-message.is-success{color:#15803d}
.player-customization-live.is-premium-locked .player-customization-controls{opacity:.58}.player-customization-live.is-premium-locked .player-customization-preview-wrap{filter:saturate(.78)}
.player-customization-live button:disabled,.player-customization-live input:disabled,.player-customization-live select:disabled{cursor:not-allowed;opacity:.58}
.player-file-status.is-valid{color:#15803d}.player-file-status.is-error{color:#dc2626}
html[data-theme="dark"] .player-customization-enable{background:rgba(99,102,241,.09);border-color:rgba(129,140,248,.22)}
html[data-theme="dark"] .player-media-default{background:rgba(255,255,255,.035)}
@media(max-width:640px){.player-customization-enable{align-items:flex-start}.player-upload-actions{width:100%}.player-upload-actions>*{flex:1 1 auto;text-align:center}.player-customization-save-actions{display:grid!important;grid-template-columns:1fr}.player-customization-save-actions .api-form-message{min-width:0}}
.player-customization-live.has-unsaved-changes .player-customization-save-actions{
  border-color:rgba(99,102,241,.34);
}
.player-customization-live.unsaved-attention{
  animation:player-customization-attention .9s ease;
}
@keyframes player-customization-attention{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){.player-customization-live.unsaved-attention{animation:none}}



/* V272 — one standalone customization card; smaller source images are allowed. */
.player-customization-card{
  margin-top:0;
  padding:22px;
  border-top:1px solid var(--border,#d8e4ef);
}
@media(max-width:620px){
  .player-customization-card{margin-top:0;padding:18px;}
}


/* V273 — full-width editor, vertical media controls, library integrated into each upload field. */
#tunetune-music-panel .music-settings-grid > .player-customization-card,
.player-customization-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

.player-customization-upload-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

.player-customization-upload {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 11px !important;
  width: 100%;
}

.player-customization-upload-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.player-customization-upload .player-upload-actions {
  justify-self: start;
}

.player-customization-upload .player-file-status {
  grid-column: 1;
  min-width: 0;
}


@media (max-width: 720px) {
  .player-customization-card { padding: 18px !important; }
  .player-customization-upload .player-upload-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .player-customization-upload .player-upload-actions > * {
    width: 100%;
    text-align: center;
  }
}

/* V340 — logo outline and configurable card accent in Music → Settings */
.player-appearance-section{
  display:grid;
  gap:13px;
  margin-top:14px;
  padding:14px;
  border:1px solid var(--account-border,#d5e1ec);
  border-radius:13px;
  background:var(--account-surface,#f8fafc);
}
.player-appearance-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  min-width:0;
}
.player-appearance-head>div{
  display:grid;
  gap:3px;
  min-width:0;
}
.player-appearance-head strong,
.player-appearance-switch-row strong{
  color:var(--account-text,#142841);
  font:900 13px/1.3 Nunito,sans-serif;
}
.player-appearance-head small,
.player-appearance-switch-row small{
  color:var(--account-muted,#6e8099);
  font:700 12px/1.4 Nunito,sans-serif;
}
.player-appearance-body{
  display:grid;
  gap:12px;
  padding-top:13px;
  border-top:1px solid var(--account-border,#d5e1ec);
}
.player-appearance-body[hidden],
.player-appearance-section [hidden]{display:none!important}
.player-appearance-switch-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  min-height:62px;
  padding:11px 13px;
  border:1px solid var(--account-border,#d5e1ec);
  border-radius:11px;
  background:var(--account-surface-soft,#f2f6fa);
}
.player-appearance-switch-row>span:first-child{
  display:grid;
  gap:3px;
  min-width:0;
}
.player-appearance-two-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.player-customization-field>.player-color-control{
  display:flex;
  align-items:center;
  gap:8px;
}
.player-segmented-control{
  display:grid;
  gap:4px;
  padding:4px;
  border:1px solid var(--account-border,#ccdae7);
  border-radius:11px;
  background:var(--account-surface-soft,#eef4f8);
}
.player-segmented-control.two-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.player-segmented-control.three-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.player-segmented-control.five-options{grid-template-columns:repeat(5,minmax(0,1fr))}
.player-segmented-control label{position:relative;min-width:0;cursor:pointer}
.player-segmented-control input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.player-segmented-control label>span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 7px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--account-muted,#60748f);
  font:900 11px/1.15 Nunito,sans-serif;
  text-align:center;
  transition:.16s ease;
}
.player-segmented-control input:checked+span{
  border-color:color-mix(in srgb,var(--account-accent,#087ac1) 38%,var(--account-border,#ccdae7));
  background:var(--account-surface,#fff);
  color:var(--account-accent,#087ac1);
  box-shadow:0 2px 8px rgba(36,74,109,.10);
}
.player-segmented-control input:focus-visible+span{
  outline:3px solid color-mix(in srgb,var(--account-accent,#087ac1) 20%,transparent);
  outline-offset:1px;
}
.player-accent-position{max-width:430px}

/* Preview accent uses an overlay, so all positions preserve card width. */
.player-embed-preview{
  --player-preview-accent-width:5px;
  display:block;
  grid-template-columns:none;
}
.player-preview-accent{
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  left:0;
  width:var(--player-preview-accent-width);
  border-radius:inherit;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  background:var(--player-preview-accent);
  pointer-events:none;
}
.player-embed-preview[data-accent-enabled="false"] .player-preview-accent{display:none}
.player-embed-preview[data-accent-side="right"] .player-preview-accent{
  right:0;left:auto;
  border-radius:inherit;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.player-embed-preview[data-accent-side="top"] .player-preview-accent{
  top:0;right:0;bottom:auto;left:0;
  width:auto;height:var(--player-preview-accent-width);
  border-radius:inherit;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.player-embed-preview[data-accent-side="bottom"] .player-preview-accent{
  top:auto;right:0;bottom:0;left:0;
  width:auto;height:var(--player-preview-accent-width);
  border-radius:inherit;
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.player-embed-preview[data-accent-side="frame"] .player-preview-accent{
  inset:0;
  width:auto;height:auto;
  border:var(--player-preview-accent-width) solid var(--player-preview-accent);
  border-radius:inherit;
  background:transparent;
}
.player-preview-content{position:relative;z-index:1}

/* Logo outline stays inside the fixed 82×82 preview box. */
.player-preview-logo{
  --player-logo-outline-color:#9B59B6;
  --player-logo-outline-width:5px;
  box-sizing:border-box;
  padding:var(--player-logo-outline-width);
  border-radius:10px;
  background:linear-gradient(#f3e8cf,#f3e8cf) content-box,var(--player-logo-outline-color);
  box-shadow:0 5px 15px rgba(0,0,0,.20);
}
.player-preview-logo[data-logo-shape="circle"]{border-radius:50%}
.player-preview-logo[data-logo-shape="square"]{border-radius:10px}
.player-preview-logo[data-outline-enabled="false"]{
  padding:0;
  background:#f3e8cf;
}
.player-preview-logo img{
  border-radius:inherit;
}

html[data-theme="dark"] .player-appearance-section,
html[data-theme="dark"] .player-appearance-switch-row,
html[data-theme="dark"] .player-segmented-control{
  border-color:#33465f;
  background:#17243a;
}
html[data-theme="dark"] .player-segmented-control input:checked+span{
  border-color:#3c506b;
  background:#111d30;
  color:#8fd3ff;
}
html[data-theme="dark"] .player-appearance-head strong,
html[data-theme="dark"] .player-appearance-switch-row strong{color:#eef5ff}

@media(max-width:720px){
  .player-appearance-two-columns{grid-template-columns:1fr}
  .player-segmented-control.five-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .player-accent-position{max-width:none}
}
@media(max-width:480px){
  .player-appearance-section{padding:12px}
  .player-appearance-head,
  .player-appearance-switch-row{gap:12px}
  .player-segmented-control.five-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* V343: native TuneTune Embed accent and animated-logo safeguards */
.player-native-accent-note{display:grid;gap:3px;padding:11px 12px;border:1px solid var(--account-border);border-radius:10px;background:var(--account-surface-soft)}
.player-native-accent-note strong{font-size:13px;color:var(--account-text)}
.player-native-accent-note span{font-size:12px;color:var(--account-muted)}
.player-logo-animation-note{margin:0 0 10px;padding:10px 12px;border:1px solid #d4a72c;border-radius:10px;background:rgba(210,153,34,.09);color:#7d4e00;font-size:12px;font-weight:800}
.player-appearance-section.is-animation-limited [data-player-logo-outline-controls]{opacity:.58}
.player-appearance-section.is-animation-limited [data-player-logo-outline-controls]::after{content:"GIF и анимированный WebP используются без обработки";display:block;margin-top:8px;color:var(--account-muted);font-size:11px;font-weight:800}
.player-native-accent-section .player-appearance-body{gap:12px}
.player-embed-preview .player-preview-accent{left:0!important;right:auto!important;top:0!important;bottom:0!important;width:5px!important;height:auto!important;border:0!important;border-radius:inherit!important;background:var(--player-preview-accent)!important}


/* V403 — TuneTune player customization: align banner/logo upload buttons in one row. */
.player-customization-upload .player-upload-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  justify-self: start !important;
}
.player-customization-upload .player-upload-actions > * {
  flex: 0 0 auto !important;
}
.player-customization-upload .player-upload-actions .player-upload-button,
.player-customization-upload .player-upload-actions .player-media-default {
  min-width: 170px !important;
}
@media (max-width: 720px) {
  .player-customization-upload .player-upload-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .player-customization-upload .player-upload-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}