.wphilo-contenedor { display: flex; flex-wrap: wrap; gap: 20px; background: #f1f1f1; padding: 20px; border-radius: 8px; font-family: sans-serif; max-width: 1300px; margin: auto; }
.wphilo-sidebar { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 15px; }
.wphilo-panel { background: white; padding: 20px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.wphilo-panel h3 { margin: 0 0 15px 0; font-size: 16px; border-bottom: 2px solid #2271b1; padding-bottom: 5px; }
.wphilo-panel label { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; margin-top: 10px; }
.wphilo-panel input[type="number"], .wphilo-panel select { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.wphilo-panel input[type="range"] { width: 100%; margin: 8px 0; }
.btn-primary, .btn-success, .btn-secondary, .btn-action { width: 100%; padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; color: white; margin-top: 10px; }
.btn-primary { background: #2271b1; } .btn-success { background: #008a20; } .btn-secondary { background: #646970; } .btn-action { background: #d63638; }
.btn-primary:disabled { background:#ccc; }
.wphilo-main { flex: 2; display: flex; gap: 20px; justify-content: space-around; flex-wrap: wrap; }
.canvas-wrapper { display: flex; flex-direction: column; align-items: center; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
canvas { max-width: 100%; height: auto; border: 1px solid #ddd; }
#wphilo-player-ui { width: 100%; margin-top: 20px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-top: 4px solid #2271b1;}
.player-controls { display: flex; flex-direction: column; gap: 15px; align-items: center; }
.player-info { text-align: center; }
.player-buttons { display: flex; gap: 10px; }
.player-buttons button { padding: 10px 20px; background: #2271b1; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight:bold; }