/* ── F-One Music Platform — Full Redesign ─────────────────────────────────── */

#fone-pl-app, #fone-up-app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 120px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ffffff !important;
}
#fone-pl-app *, #fone-up-app * { box-sizing: border-box; }

.fone-pl-empty-state { text-align:center; padding:80px 24px; }
.fone-pl-empty-icon  { font-size:64px; margin-bottom:16px; }
.fone-pl-empty-state h3 { font-size:24px; font-weight:800; color:#ffffff !important; margin:0 0 8px; }
.fone-pl-empty-state p  { color:#888aa0 !important; margin:0 0 24px; }

/* Hero */
.fone-pl-hero {
    position:relative; border-radius:16px; overflow:hidden;
    margin-bottom:32px; min-height:360px;
    background:#1a1a2e !important;
    background-size:cover !important; background-position:center !important;
}
.fone-pl-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(13,13,26,.95) 0%,rgba(13,13,26,.6) 60%,rgba(232,160,32,.08) 100%) !important;
}
.fone-pl-hero-content { position:relative; z-index:2; padding:48px 40px; max-width:600px; }
.fone-pl-hero-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:#e8a020 !important; margin-bottom:12px; }
.fone-pl-hero-title  { font-size:36px; font-weight:900; color:#ffffff !important; margin:0 0 8px; line-height:1.1; }
.fone-pl-hero-artist { font-size:16px; color:#888aa0 !important; margin-bottom:16px; }
.fone-pl-hero-tags   { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px; }
.fone-pl-hero-actions{ display:flex; align-items:center; gap:12px; }
.fone-pl-hero-play {
    display:flex; align-items:center; gap:10px;
    padding:14px 28px; background:#e8a020 !important; border:none; border-radius:999px;
    color:#0d0d1a !important; font-size:15px; font-weight:800; cursor:pointer;
    transition:transform .15s,background .2s;
}
.fone-pl-hero-play:hover { background:#c4861a !important; transform:scale(1.03); }
.fone-pl-hero-dl, .fone-pl-hero-share {
    width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08) !important;
    color:#ffffff !important; display:flex; align-items:center; justify-content:center;
    text-decoration:none !important; cursor:pointer; transition:background .2s,border-color .2s;
}
.fone-pl-hero-dl:hover,.fone-pl-hero-share:hover { background:rgba(232,160,32,.2) !important; border-color:#e8a020 !important; }

/* Toolbar */
.fone-pl-toolbar { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.fone-pl-search-wrap { position:relative; max-width:420px; }
.fone-pl-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:13px; }
.fone-pl-search {
    width:100%; background:#1a1a2e !important; border:1px solid #2a2a45 !important;
    border-radius:999px; color:#ffffff !important; font-size:14px;
    padding:11px 16px 11px 40px; transition:border-color .2s;
}
.fone-pl-search:focus { outline:none !important; border-color:#e8a020 !important; }
.fone-pl-search::placeholder { color:#555770 !important; }
.fone-pl-filters { display:flex; flex-wrap:wrap; gap:6px; }
.fone-pl-tag {
    padding:6px 16px; border-radius:999px; border:1px solid #2a2a45;
    background:#1a1a2e !important; color:#888aa0 !important;
    font-size:12px; font-weight:700; cursor:pointer; transition:all .15s;
    text-transform:uppercase; letter-spacing:.5px;
}
.fone-pl-tag:hover  { border-color:#e8a020 !important; color:#e8a020 !important; }
.fone-pl-tag.active { background:#e8a020 !important; border-color:#e8a020 !important; color:#0d0d1a !important; }
.fone-pl-count { font-size:12px; color:#555770 !important; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; }

/* Grid */
.fone-pl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.fone-pl-card {
    background:#1a1a2e !important; border:1px solid #2a2a45 !important;
    border-radius:12px; overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s; cursor:pointer;
}
.fone-pl-card:hover { border-color:rgba(232,160,32,.4) !important; transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.4); }
.fone-pl-card.playing { border-color:#e8a020 !important; box-shadow:0 0 0 2px rgba(232,160,32,.2); }

.fone-pl-card-art { position:relative; aspect-ratio:1; background:#0d0d1a !important; overflow:hidden; }
.fone-pl-card-art img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.fone-pl-card:hover .fone-pl-card-art img { transform:scale(1.05); }
.fone-pl-card-art-placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:48px; background:linear-gradient(135deg,#1a1a2e 0%,#0d0d1a 100%) !important;
}
.fone-pl-card-overlay {
    position:absolute; inset:0; background:rgba(0,0,0,.5) !important;
    display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s;
}
.fone-pl-card:hover .fone-pl-card-overlay,
.fone-pl-card.playing .fone-pl-card-overlay { opacity:1; }
.fone-pl-card-play-btn {
    width:48px; height:48px; border-radius:50%; background:#e8a020 !important; border:none;
    color:#0d0d1a !important; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .15s;
}
.fone-pl-card-play-btn:hover { transform:scale(1.1); }

.fone-pl-playing-indicator { position:absolute; bottom:8px; left:8px; display:flex; align-items:flex-end; gap:2px; height:20px; }
.fone-pl-playing-indicator span { width:3px; background:#e8a020 !important; border-radius:2px; animation:foneBeat 1s ease-in-out infinite; }
.fone-pl-playing-indicator span:nth-child(1){height:60%;animation-delay:0s}
.fone-pl-playing-indicator span:nth-child(2){height:100%;animation-delay:.2s}
.fone-pl-playing-indicator span:nth-child(3){height:40%;animation-delay:.4s}
.fone-pl-playing-indicator span:nth-child(4){height:80%;animation-delay:.1s}
@keyframes foneBeat { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }

.fone-pl-card-body { padding:12px 12px 8px; }
.fone-pl-card-title  { font-size:13px; font-weight:700; color:#ffffff !important; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fone-pl-card-artist { font-size:12px; color:#e8a020 !important; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fone-pl-card-tags   { display:flex; flex-wrap:wrap; gap:4px; }
.fone-pl-card-tag    { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(232,160,32,.12) !important; color:#e8a020 !important; border:1px solid rgba(232,160,32,.2); text-transform:uppercase; letter-spacing:.3px; }

.fone-pl-card-footer { display:flex; align-items:center; justify-content:space-between; padding:6px 12px 10px; }
.fone-pl-card-dl-count { display:flex; align-items:center; gap:4px; font-size:11px; color:#555770 !important; }
.fone-pl-card-actions { display:flex; gap:4px; }
.fone-pl-action-btn {
    width:28px; height:28px; border-radius:6px; border:1px solid #2a2a45;
    background:transparent !important; color:#555770 !important;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    text-decoration:none !important; transition:all .15s;
}
.fone-pl-action-btn:hover { border-color:#e8a020 !important; color:#e8a020 !important; background:rgba(232,160,32,.08) !important; }

.fone-pl-no-results { text-align:center; padding:60px 0; color:#888aa0 !important; }
.fone-pl-no-results p { font-size:16px; margin:8px 0 0; }

/* Sticky Player */
.fone-pl-player {
    position:fixed; bottom:0; left:0; right:0; z-index:9990;
    background:rgba(13,13,26,.96) !important;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid #2a2a45;
    padding:12px 24px;
    display:grid;
    grid-template-columns:48px 180px auto 1fr auto;
    align-items:center; gap:16px;
}
.fone-pl-player-art { width:48px; height:48px; border-radius:8px; background:#1a1a2e !important; background-size:cover !important; background-position:center !important; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.fone-pl-player-title  { font-size:13px; font-weight:700; color:#ffffff !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fone-pl-player-artist { font-size:11px; color:#888aa0 !important; }
.fone-pl-player-controls { display:flex; align-items:center; gap:8px; justify-content:center; }
.fone-pl-ctrl { width:34px; height:34px; border-radius:50%; border:1px solid #2a2a45; background:#1a1a2e !important; color:#ffffff !important; font-size:13px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.fone-pl-ctrl-main { width:44px; height:44px; background:#e8a020 !important; border-color:#e8a020 !important; color:#0d0d1a !important; }
.fone-pl-ctrl:hover { opacity:.8; }
.fone-pl-player-progress { display:flex; align-items:center; gap:10px; }
.fone-pl-time { font-size:11px; color:#888aa0 !important; white-space:nowrap; }
.fone-pl-bar  { flex:1; height:4px; background:#2a2a45 !important; border-radius:2px; cursor:pointer; }
.fone-pl-bar-fill { height:100%; background:#e8a020 !important; border-radius:2px; width:0%; pointer-events:none; }
.fone-pl-player-vol { display:flex; align-items:center; gap:8px; color:#888aa0 !important; }
.fone-pl-vol-slider { width:80px; accent-color:#e8a020; }

/* Toast */
.fone-pl-toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(10px); background:#e8a020 !important; color:#0d0d1a !important; font-weight:800; font-size:13px; padding:10px 20px; border-radius:999px; opacity:0; transition:all .25s; pointer-events:none; z-index:99999; white-space:nowrap; }
.fone-pl-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Upload form */
.fone-up-wrap { max-width:640px; margin:0 auto; padding:32px 20px; }
.fone-up-header { text-align:center; margin-bottom:32px; }
.fone-up-title   { font-size:26px; font-weight:800; margin:0 0 8px; color:#ffffff !important; }
.fone-up-subtitle{ font-size:14px; color:#888aa0 !important; margin:0; }
.fone-up-form { background:#1a1a2e !important; border:1px solid #2a2a45 !important; border-radius:12px; padding:28px; }
.fone-up-field { margin-bottom:20px; }
.fone-up-label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#888aa0 !important; margin-bottom:8px; }
.fone-up-req      { color:#e8a020 !important; }
.fone-up-optional { color:#555770 !important; font-weight:400; text-transform:none; letter-spacing:0; }
.fone-up-input { width:100%; background:#0d0d1a !important; border:1px solid #2a2a45 !important; border-radius:8px !important; color:#ffffff !important; font-size:14px; padding:10px 14px; transition:border-color .2s; }
.fone-up-input:focus { outline:none !important; border-color:#e8a020 !important; }
.fone-up-input::placeholder { color:#555770 !important; }
.fone-up-success { text-align:center; padding:48px 24px; background:#1a1a2e !important; border:1px solid #2a2a45 !important; border-radius:12px; }
.fone-up-success-icon{ font-size:52px; margin-bottom:16px; }
.fone-up-success h3  { font-size:22px; font-weight:800; color:#ffffff !important; margin:0 0 8px; }
.fone-up-success p   { color:#888aa0 !important; margin:0 0 24px; }

/* Responsive */
@media (max-width:768px) {
    .fone-pl-hero-content { padding:32px 24px; }
    .fone-pl-hero-title   { font-size:26px; }
    .fone-pl-player { grid-template-columns:40px 1fr auto; grid-template-rows:auto auto; gap:8px; padding:10px 16px; }
    .fone-pl-player-controls { grid-column:3; grid-row:1; }
    .fone-pl-player-progress { grid-column:1/-1; grid-row:2; }
    .fone-pl-player-vol { display:none; }
    .fone-pl-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
}
@media (max-width:480px) {
    .fone-pl-hero { min-height:280px; }
    .fone-pl-hero-title { font-size:22px; }
    .fone-pl-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Featured Homepage Widget ─────────────────────────────────────────────── */
#fone-feat-app {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#fone-feat-app * { box-sizing: border-box; }

.fone-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.fone-feat-card {
    background: rgba(26,26,46,0.85) !important;
    border: 1px solid #2a2a45 !important;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    cursor: pointer;
    backdrop-filter: blur(10px);
}
.fone-feat-card:hover {
    border-color: rgba(232,160,32,.5) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.fone-feat-card.playing {
    border-color: #e8a020 !important;
    box-shadow: 0 0 0 2px rgba(232,160,32,.15), 0 12px 40px rgba(0,0,0,.5);
}

/* Art */
.fone-feat-art {
    position: relative;
    aspect-ratio: 1;
    background: #0d0d1a !important;
    overflow: hidden;
}
.fone-feat-art img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .4s;
}
.fone-feat-card:hover .fone-feat-art img { transform: scale(1.06); }
.fone-feat-art-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    background: linear-gradient(135deg, #1a1a2e, #0d0d1a) !important;
}
.fone-feat-art-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45) !important;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s;
}
.fone-feat-card:hover .fone-feat-art-overlay,
.fone-feat-card.playing .fone-feat-art-overlay { opacity: 1; }

.fone-feat-play-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: #e8a020 !important; border: none;
    color: #0d0d1a !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform .15s;
    box-shadow: 0 4px 20px rgba(232,160,32,.4);
}
.fone-feat-play-btn:hover { transform: scale(1.1); }

/* Animated bars */
.fone-feat-bars {
    position: absolute; bottom: 10px; left: 10px;
    display: flex; align-items: flex-end; gap: 2px; height: 18px;
}
.fone-feat-bars span {
    width: 3px; background: #e8a020 !important; border-radius: 2px;
    animation: foneBeat 1s ease-in-out infinite;
}
.fone-feat-bars span:nth-child(1){height:60%;animation-delay:0s}
.fone-feat-bars span:nth-child(2){height:100%;animation-delay:.2s}
.fone-feat-bars span:nth-child(3){height:40%;animation-delay:.4s}
.fone-feat-bars span:nth-child(4){height:80%;animation-delay:.1s}

/* Info */
.fone-feat-info { padding: 14px; }
.fone-feat-title  { font-size: 14px; font-weight: 700; color: #ffffff !important; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fone-feat-artist { font-size: 12px; color: #e8a020 !important; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mini progress */
.fone-feat-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fone-feat-prog-bar  { flex: 1; height: 3px; background: #2a2a45 !important; border-radius: 2px; cursor: pointer; }
.fone-feat-prog-fill { height: 100%; background: #e8a020 !important; border-radius: 2px; width: 0%; pointer-events: none; }
.fone-feat-time      { font-size: 10px; color: #888aa0 !important; white-space: nowrap; }

/* Stats + actions */
.fone-feat-stats { display: flex; align-items: center; justify-content: space-between; }
.fone-feat-stat  { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #555770 !important; }
.fone-feat-actions { display: flex; gap: 4px; }
.fone-feat-btn {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid #2a2a45; background: transparent !important;
    color: #555770 !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none !important; transition: all .15s;
}
.fone-feat-btn:hover { border-color: #e8a020 !important; color: #e8a020 !important; }

/* See all */
.fone-feat-footer { text-align: center; }
.fone-feat-see-all {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700;
    color: #e8a020 !important;
    text-decoration: none !important;
    border: 1px solid rgba(232,160,32,.3);
    border-radius: 999px;
    padding: 8px 20px;
    transition: all .2s;
}
.fone-feat-see-all:hover {
    background: rgba(232,160,32,.08) !important;
    border-color: #e8a020 !important;
}

/* Responsive */
@media (max-width: 640px) {
    .fone-feat-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Top Artists Widget ───────────────────────────────────────────────────── */
#fone-art-app { width: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#fone-art-app * { box-sizing: border-box; }

.fone-art-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fone-art-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    padding: 20px 12px;
    background: rgba(26,26,46,0.85) !important;
    border: 1px solid #2a2a45 !important;
    border-radius: 16px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    backdrop-filter: blur(10px);
    cursor: pointer;
}
.fone-art-card:hover {
    border-color: #e8a020 !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.fone-art-photo {
    position: relative;
    width: 90px;
    height: 90px;
    margin-bottom: 14px;
}
.fone-art-photo img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform .3s;
}
.fone-art-card:hover .fone-art-photo img { transform: scale(1.05); }
.fone-art-photo-placeholder {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e, #0d0d1a) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    position: relative; z-index: 1;
}
.fone-art-photo-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #e8a020, rgba(232,160,32,.2)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    transition: opacity .2s;
    opacity: 0;
}
.fone-art-card:hover .fone-art-photo-ring { opacity: 1; }

.fone-art-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.fone-art-meta {
    font-size: 11px;
    color: #888aa0 !important;
}

/* ── Artist Filter Banner ─────────────────────────────────────────────────── */
.fone-pl-artist-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(232,160,32,.1) !important;
    border: 1px solid rgba(232,160,32,.3) !important;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #ffffff !important;
    gap: 12px;
}
.fone-pl-artist-filter-bar svg { vertical-align: middle; margin-right: 6px; color: #e8a020; }
.fone-pl-artist-filter-bar strong { color: #e8a020 !important; }
.fone-pl-artist-filter-clear {
    font-size: 12px;
    font-weight: 700;
    color: #888aa0 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s;
}
.fone-pl-artist-filter-clear:hover { color: #ef4444 !important; }

/* Responsive */
@media (max-width: 640px) {
    .fone-art-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Share Modal ─────────────────────────────────────────────────────────── */
.fone-share-backdrop {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(0,0,0,.6) !important;
    backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.fone-share-backdrop.open { opacity: 1; pointer-events: all; }

.fone-share-modal {
    position: fixed; z-index: 99991;
    bottom: 0; left: 0; right: 0;
    background: #1a1a2e !important;
    border-top: 1px solid #2a2a45;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px 36px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-width: 540px;
    margin: 0 auto;
}
.fone-share-modal.open { transform: translateY(0); }

.fone-share-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2a2a45;
}
.fone-share-song-title  { font-size: 15px; font-weight: 700; color: #ffffff !important; }
.fone-share-song-artist { font-size: 12px; color: #888aa0 !important; margin-top: 2px; }
.fone-share-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #2a2a45; background: #0d0d1a !important;
    color: #888aa0 !important; font-size: 13px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.fone-share-close:hover { border-color: #ef4444 !important; color: #ef4444 !important; }

.fone-share-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.fone-share-opt {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 16px 8px;
    background: #0d0d1a !important;
    border: 1px solid #2a2a45 !important;
    border-radius: 12px;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.fone-share-opt:hover {
    border-color: #e8a020 !important;
    transform: translateY(-2px);
}
.fone-share-opt-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: #1a1a2e !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900;
    color: #ffffff !important;
}
.fone-share-wa  { background: #25D366 !important; font-family: Arial, sans-serif; }
.fone-share-fb  { background: #1877F2 !important; font-family: Arial, sans-serif; font-size: 24px; }
.fone-share-tw  { background: #000000 !important; font-size: 18px; }
.fone-share-sms { background: #34C759 !important; }
.fone-share-em  { background: #e8a020 !important; color: #0d0d1a !important; font-size: 18px; }
.fone-share-opt-label {
    font-size: 11px; font-weight: 600;
    color: #888aa0 !important;
    text-align: center;
}
#fone-share-copy .fone-share-opt-icon { background: #2a2a45 !important; }

/* Fix card action buttons to look like text labels */
.fone-pl-action-btn {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    padding: 0 10px !important;
    width: auto !important;
    height: 28px !important;
    border-radius: 6px !important;
}

/* Fix play button to not be a blob */
.fone-pl-card-play-btn {
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    background: #e8a020 !important; border: none !important;
    color: #0d0d1a !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 20px rgba(232,160,32,.4) !important;
}

/* Hero share as a styled button not an icon */
.fone-pl-hero-share {
    padding: 10px 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    background: rgba(255,255,255,.1) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    width: auto !important; height: auto !important;
}
.fone-pl-hero-share:hover {
    background: rgba(232,160,32,.2) !important;
    border-color: #e8a020 !important;
}

/* ── Force all plugin SVGs visible — override any theme CSS ─────────────── */
#fone-pl-app svg.fone-ic,
#fone-up-app svg.fone-ic,
#fone-feat-app svg.fone-ic,
#fone-art-app svg.fone-ic,
.fone-pl-player svg.fone-ic,
.fone-share-modal svg.fone-ic {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
/* Search icon specifically */
.fone-pl-search-icon.fone-ic {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #888aa0 !important;
    pointer-events: none !important;
    width: 16px !important;
    height: 16px !important;
}