/* AFTER Musics — área de faixas dos próprios usuários (sidebar ESPAÇOS). */
.after-musics-page{padding:18px clamp(12px,3vw,28px) 120px}
.am-hero{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,var(--surface-2),var(--surface));position:relative;overflow:hidden}
.am-hero::after{content:"";position:absolute;inset:auto -20% -60% auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(130,114,255,.28),transparent 68%);pointer-events:none}
.am-hero-mark{width:56px;height:56px;flex:0 0 56px;display:block;border-radius:16px;object-fit:cover}
.am-hero-copy{flex:1 1 auto;min-width:0}
.am-hero-copy small{display:block;letter-spacing:.18em;font-size:10px;color:var(--muted-2);text-transform:uppercase}
.am-hero-copy h2{margin:2px 0 4px;font-size:clamp(19px,2.4vw,24px)}
.am-hero-copy p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.am-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.am-btn{appearance:none;border:1px solid var(--border);background:var(--surface-3);color:var(--text);border-radius:12px;padding:10px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .18s,transform .18s,background .18s}
.am-btn:hover{border-color:var(--purple);transform:translateY(-1px)}
.am-btn[disabled]{opacity:.55;cursor:progress;transform:none}
.am-btn-primary{background:linear-gradient(135deg,var(--purple),var(--pink));border-color:transparent;color:#fff}
.am-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px;flex-wrap:wrap}
.am-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.am-tabs button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer}
.am-tabs button.is-on{background:var(--surface-3);color:var(--text)}
.am-count{color:var(--muted-2);font-size:12.5px}
.am-status{min-height:20px;color:var(--muted);font-size:13px;margin:4px 2px 12px}
.am-status.is-erro{color:var(--pink)}
.am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.am-card{position:relative;display:grid;grid-template-columns:54px 1fr auto;grid-template-rows:auto auto;gap:0 12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);transition:border-color .18s,background .18s}
.am-card:hover{border-color:rgba(130,114,255,.55)}
.am-card.is-tocando{border-color:var(--purple);background:linear-gradient(180deg,rgba(130,114,255,.12),var(--surface))}
.am-cover{grid-row:1/span 2;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:20px;background:linear-gradient(140deg,var(--surface-3),var(--surface-2));border:1px solid var(--border);color:var(--purple-light)}
.am-title{font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.am-by{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
.am-by b{color:var(--text);font-weight:600}
.am-you{display:inline-block;margin-left:6px;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-light);border:1px solid rgba(130,114,255,.4);border-radius:999px;padding:2px 7px;vertical-align:1px}
.am-play{grid-row:1/span 2;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface-3);color:var(--text);font-size:14px;cursor:pointer;display:grid;place-items:center;transition:border-color .18s,transform .18s}
.am-play:hover{border-color:var(--purple);transform:scale(1.06)}
.am-card-actions{grid-column:2/-1;display:flex;gap:12px;margin-top:6px}
.am-link-danger{appearance:none;border:0;background:transparent;color:var(--muted-2);font:inherit;font-size:12px;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.am-link-danger:hover{color:var(--pink)}
.am-empty{padding:26px 18px;border:1px dashed var(--border);border-radius:18px;color:var(--muted);font-size:13.5px;text-align:center;background:var(--surface)}
.am-empty.hidden,.am-player.hidden{display:none}

/* barra do player — fica acima do rodapé mobile */
.am-player{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;width:min(680px,calc(100vw - 20px));display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(130,114,255,.42);border-radius:18px;background:rgba(14,16,24,.94);backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:60}
.am-player-main{flex:1 1 auto;min-width:0}
.am-player-title{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-player-author{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-seek{position:relative;flex:1 1 auto;height:8px;border-radius:999px;background:var(--surface-3);cursor:pointer;overflow:hidden}
.am-seek i{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--pink))}
.am-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.am-player-close{appearance:none;border:1px solid var(--border);background:transparent;color:var(--muted);width:28px;height:28px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1}
.am-player-close:hover{color:var(--text);border-color:var(--purple)}
.am-player-toggle{appearance:none;width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid rgba(130,114,255,.5);background:var(--surface-3);color:var(--text);font-size:12px;cursor:pointer;display:grid;place-items:center}
.am-player-toggle:hover{border-color:var(--purple)}
.after-musics-nav-icon{width:22px;height:22px;display:block;border-radius:7px;object-fit:cover}

/* diálogo de publicação */
.am-shade{position:fixed;inset:0;background:rgba(4,5,9,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;z-index:120}
.am-dialog{width:min(520px,100%);max-height:88vh;overflow:auto;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.am-dialog-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.am-dialog-top small{letter-spacing:.18em;font-size:10px;color:var(--muted-2)}
.am-dialog-top h3{margin:2px 0 0;font-size:18px}
.am-close{margin-left:auto;appearance:none;border:1px solid var(--border);background:transparent;color:var(--muted);width:30px;height:30px;border-radius:10px;font-size:18px;line-height:1;cursor:pointer}
.am-close:hover{color:var(--text);border-color:var(--purple)}
.am-field{display:block;margin-bottom:14px}
.am-label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.am-file{display:block;width:100%;font-size:13px;color:var(--muted)}
.am-file::file-selector-button{margin-right:10px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-3);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer}
.am-picked{margin-top:6px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.am-input{display:block;width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;font-size:14px}
.am-input:focus{outline:none;border-color:var(--purple)}
.am-counter{display:block;margin-top:4px;text-align:right;font-size:11px;color:var(--muted-2)}
.am-term{padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);margin-bottom:12px}
.am-term h4{margin:0 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-light)}
.am-term p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.am-consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text);cursor:pointer}
.am-consent input{margin-top:2px;accent-color:var(--purple);width:16px;height:16px}
.am-upload-status{min-height:18px;font-size:12.5px;color:var(--muted);margin-bottom:10px;overflow-wrap:anywhere}
.am-upload-status.is-erro{color:var(--pink)}
.am-dialog-actions{display:flex;justify-content:flex-end;gap:10px}

@media (max-width:760px){
  .am-hero{flex-wrap:wrap;padding:16px}
  .am-hero-actions{width:100%}
  .am-hero-actions .am-btn{flex:1 1 auto;text-align:center}
  .am-grid{grid-template-columns:1fr}
  .am-player{bottom:70px}
}